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

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文件便可，即便增長了代理也可只增長配置文件完成代理。