vue配置文件實現代理v2版本

CoXie 發布于2019-08-23 18:14 / 1329人閱讀

摘要：實現不同服務器代理接上篇，雖然可實現多版本代理，但是每增加一種模式就需要重下新修改以及，感覺很不智能，擴展性挺差。使用時只需更改文件即可，即使增加了代理也可只增加配置文件完成代理。

vue實現不同服務器代理

接上篇，雖然可實現多版本代理，但是每增加一種模式就需要重下新修改vue.config.js以及.env.dev.local，感覺很不智能，擴展性挺差。
主要實現思路：模仿vue中.env.local文件，此文件被git忽略，且可根據當前環境變量加載不同的數據，由此在項目根目錄下新建development文件夾，在development文件加下建立config文件夾，用戶放置配置文件，config下目前暫有兩個文件 config.development.local config.owndev.local
在.gitignore中添加
development/config/config.local
development/config/config.*.local
忽略所有的配置local文件，然后通過node讀取文件加載配置的json文件，并將代理規則通過代碼完善，導出代理規則，最終輸出的vue.config.js中實現代理,通過cross-env模塊改變系統變量設置，最終實現不同環境下不同文件的加載

現新建項目，目錄結構如下：

其中development為新添加目錄，其中主要放置需要代理的文件

config下

.gitignore 添加對文件的忽略

development/config/config.local
development/config/config.*.local

development/config 下的config.development.dev

  {
      "/api":"http://serverurl"
  }

development/config 下的config.owndev.dev

{
      "/api/login":"http://localhost:8080",
      "/api/register":"http://localhost:8081"
}

proxy.js實現主要的代理邏輯，思路如下，根據cross-env設置的環境變量加載不同的json文件
cross-env 用法，在package.json 中devDependencies中添加 ,然后npm i --save-dev cross-env即可

 "devDependencies": {
    "cross-env": "^5.2.0"
  }

用法在啟動vue服務前添加 cross-env BUILD_ENV=development 即可
如下

"script":{
     "serve": "cross-env BUILD_ENV=development  vue-cli-service serve",
     "owndev": "cross-env BUILD_ENV=owndev  vue-cli-service serve",
}

當執行npm run serve 時 process.env.BUILD_ENV 值為development,當執行 npm run owndev時，process.env.BUILD_ENV的值為 owndev
proxy.js實現的主邏輯如下：

var path = require("path"); //系統路徑模塊
var fs = require("fs"); //文件模塊
const defaultProxy =  {
    "/api":"http://serverUrl"
};
//根據當前的運行環境判斷走哪個配置
const DEVELOPMENT = "development"
let currentEnv = process.env.BUILD_ENV?process.env.BUILD_ENV:DEVELOPMENT
let configPath = `config/config.${currentEnv}.local`
let filePath = path.join(__dirname, configPath); //文件路徑，__dirname為當前運行js文件的目錄
let proxyContent =  null;
//讀取json文件,異步
/*fs.readFile(filePath, "utf-8", function(err, data) {
    if (!err) {
       proxyContent = data;
    } 
});*/
//將json字符串轉化為json對象
try{
proxyContent = JSON.parse(fs.readFileSync(filePath,"utf-8"))
}catch(e){
proxyContent = defaultProxy
}
if(proxyContent == null){
    proxyContent = defaultProxy
}
let proxys = {}
//遍歷所有的配置代理，對應不同的服務器

Object.getOwnPropertyNames(proxyContent).forEach(function (key) {
    let targetPath = proxyContent[key]
    let proxyItem = {};
    proxyItem.target = targetPath;
    proxyItem.ws = true;
    proxyItem.changeOrigin = true;
    proxyItem.pathRewrite = {}
    proxyItem.pathRewrite[`^${key}`] = "/"
    proxys[key] = proxyItem
});

module.exports = proxys

在vue.config.js中引用該文件

let proxy = require("./development/proxy/proxy")

let config =  {
    publicPath:"/" ,
    devServer: {
        port: 8080,
        proxy:proxy
    }
}

module.exports = config

以上，完成。使用時只需更改 development/config/config.owndev.local文件即可，即使增加了代理也可只增加配置文件完成代理。

GPU云服務器云服務器透明代理 v2ray VUE實現webrtc Vue實現分頁 vue+webrtc實現實時視頻通話,語音通話

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104882.html

用 Vue 全家桶二次開發 V2EX 社區

摘要：一開發背景為了全面的熟悉技術棧，結合的開放開發了這個簡潔版的。在線預覽來自官方以及的整理。當頁面刷新后也無法顯示，請查看控制臺的異步請求是否返回。一、開發背景為了全面的熟悉Vue+Vue-router+Vuex+axios技術棧，結合V2EX的開放API開發了這個簡潔版的V2EX。在線預覽 API來自官方以及djyde的整理。在線訪問請節制使用，跨域是通過Nginx配置反向代...

shiguibiao 2019-08-20 16:36 評論0 收藏0
實例PK(Vue服務端渲染 VS Vue瀏覽器端渲染)

摘要：說起，其實早在出現之前，網頁就是在服務端渲染的。二服務器渲染如此快有部分原因來自，但是排除這部分，還是比瀏覽器端要快至少幾倍。當然，我們可以考慮首屏采用服務端渲染的方式，因為完全服務端渲染會考慮到很多問題，比如復雜均衡等等等 Vue 2.0 開始支持服務端渲染的功能，所以本文章也是基于vue 2.0以上版本。網上對于服務端渲染的資料還是比較少，最經典的莫過于Vue作者尤雨溪大神的 vu...

GeekGhc 2019-08-20 15:19 評論0 收藏0
微豆 - Vue 2.0 實現豆瓣 Web App 教程

摘要：微豆一個使用與重構豆瓣的項目。在中的配置代理重新啟動，打開查看結果是否與直接請求豆瓣相同。更多請參考豆瓣電影文檔。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。微豆 Vdo 一個使用 Vue.js 與 Material Design 重構豆瓣的項目。項目網站 http://vdo.ralfz.com/ GitHub https:...

cjie 2019-08-20 15:11 評論0 收藏0
Vue全家桶實現還原豆瓣電影wap版

摘要：豆瓣電影版用全家桶仿寫豆瓣電影版。原計劃仿寫完所有頁面，礙于豆瓣的接口有限，實現頁面也有限。由于公開的豆瓣接口具有訪問次數限制，克隆到本地體驗效果更加端訪問已設置寬度適配。 douban-movie(豆瓣電影wap版) 用vue全家桶仿寫豆瓣電影wap版。最近在公司項目中嘗試使用vue，但奈何自己初學水平有限，上了vue沒有上vuex，開發過程特別難受。于是玩一玩本項目，算是對相關...

Near_Li 2019-08-20 16:00 評論0 收藏0
跨域解決方案（易懂，持續更新中……）

摘要：跨域總結跨域思路跨域解決方案一般分為兩種前端解決，后端解決前端解決方案通過前端解決的思想就是，通過設置中間件把跨域的請求轉發一下，其實就是反向代理，比如想要訪問豆瓣的接口很，但是如果請求的是就不存在跨域反向代理就是截取之后重寫請求將請求轉發跨域總結 1.跨域思路跨域解決方案一般分為兩種：前端解決，后端解決 1.1 前端解決方案通過前端解決的思想就是，通過設置中間件把跨域的請求轉發...

wupengyu 2019-07-25 14:24 評論0 收藏0