快捷導(dǎo)航

vue配置文件實(shí)現(xiàn)代理v2版本的方法

更新時(shí)間：2019年06月21日 09:52:03 作者：驀然回首

這篇文章主要介紹了vue配置文件實(shí)現(xiàn)代理v2版本的方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

vue實(shí)現(xiàn)不同服務(wù)器代理，接上篇，雖然可實(shí)現(xiàn)多版本代理，但是每增加一種模式就需要重下新修改vue.config.js以及.env.dev.local，感覺很不智能，擴(kuò)展性挺差。

主要實(shí)現(xiàn)思路：

模仿vue中.env.local文件，此文件被git忽略，且可根據(jù)當(dāng)前環(huán)境變量加載不同的數(shù)據(jù)，由此在項(xiàng)目根目錄下新建development文件夾，在development文件加下建立config文件夾，用戶放置配置文件，config下目前暫有兩個(gè)文件 config.development.local config.owndev.local

在.gitignore中添加

development/config/config.local

development/config/config.*.local

忽略所有的配置local文件，然后通過node讀取文件加載配置的json文件，并將代理規(guī)則通過代碼完善，導(dǎo)出代理規(guī)則，最終輸出的vue.config.js中實(shí)現(xiàn)代理,通過cross-env模塊改變系統(tǒng)變量設(shè)置，最終實(shí)現(xiàn)不同環(huán)境下不同文件的加載

現(xiàn)新建項(xiàng)目，目錄結(jié)構(gòu)如下：

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

config下

.gitignore 添加對(duì)文件的忽略

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實(shí)現(xiàn)主要的代理邏輯，思路如下，根據(jù)cross-env設(shè)置的環(huán)境變量加載不同的json文件

cross-env 用法，在package.json 中devDependencies中添加 ,然后npm i --save-dev cross-env即可

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

用法在啟動(dòng)vue服務(wù)前添加 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",
}

當(dāng)執(zhí)行npm run serve 時(shí) process.env.BUILD_ENV 值為development,當(dāng)執(zhí)行 npm run owndev時(shí)，process.env.BUILD_ENV的值為 owndev

proxy.js實(shí)現(xiàn)的主邏輯如下：

var path = require('path'); //系統(tǒng)路徑模塊
var fs = require('fs'); //文件模塊
const defaultProxy = {
 "/api":"http://serverUrl"
};
//根據(jù)當(dāng)前的運(yùn)行環(huán)境判斷走哪個(gè)配置
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為當(dāng)前運(yùn)行js文件的目錄
let proxyContent = null;
//讀取json文件,異步
/*fs.readFile(filePath, 'utf-8', function(err, data) {
 if (!err) {
  proxyContent = data;
 } 
});*/
//將json字符串轉(zhuǎn)化為json對(duì)象
try{
proxyContent = JSON.parse(fs.readFileSync(filePath,'utf-8'))
}catch(e){
proxyContent = defaultProxy
}
if(proxyContent == null){
 proxyContent = defaultProxy
}
let proxys = {}
//遍歷所有的配置代理，對(duì)應(yīng)不同的服務(wù)器
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

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

總結(jié)

以上所述是小編給大家介紹的vue配置文件實(shí)現(xiàn)代理v2版本的方法,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: