您好,登錄后才能下訂單哦!
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 添加對文件的忽略
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對象 try{ proxyContent = JSON.parse(fs.readFileSync(filePath,'utf-8')) }catch(e){ proxyContent = defaultProxy } if(proxyContent == null){ proxyContent = defaultProxy } let proxys = {} //遍歷所有的配置代理,對應(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版本的方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對億速云網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。