vue動態(tài)代理無須重啟項目解決方案詳解
1.背景
當(dāng)我們vue構(gòu)建項目的時候，都會在vue.config.js中配置我們需要代理的服務(wù)器地址。有時候我們需要使用不同后端服務(wù)器地址，也就是我們開發(fā)中所說的測試環(huán)境、灰度環(huán)境、正式環(huán)境等，這個時候如果我們需要使用不同的環(huán)境地址的時候，就需要使用命令或者手動修改vue.config.js中配置來重新啟動項目。當(dāng)項目項目越來越大的時候，我們需要很長的時間來啟動項目，如此反復(fù)，極大影響我們開發(fā)進(jìn)度。這個時候我們急需一種vue動態(tài)代理無須重啟項目解決方案來提高我們的開發(fā)項目，以此為背景，萌生出了以下方案。
2.技術(shù)方案
2.1 舊的配置方案
我們在vue.config.js中常用的代理方案如下：
const port = process.env.port || process.env.npm_config_port || 80 // 端口
module.exports = {
lintOnSave: false,
devServer: {
host: '0.0.0.0',
port,
open: false,
proxy: {
'/my-api': {
target: 'https://www.baidu.com',
ws: false,
changeOrigin: true,
}
}
}
}
在啟動項目的時候，只會讀取一次配置文件，當(dāng)再次修改target地址時，vue-cli是無法感知文件的變化，所以代理的還是舊的地址，所以我們需要重新啟動項目來使配置生效。有沒有一種方案，可以在修改配置的時候能使vue-cli感知到文件的變化，從而讀取新的配置呢？方案入下：
2.2 新的配置方案思路
vue-cli 的代理是使用的http-proxy-middleware包，所以proxy選項的配置也是基于這個包的配置。在proxy配置選項中有兩個屬性target以及router。其中target是默認(rèn)的代理地址。而router可以return一個字符串服務(wù)地址，那么當(dāng)兩個選項都配置了時，http-proxy-middleware在解析配置時，會首先使用router函數(shù)的返回值，當(dāng)router的返回值不可以用時，那么就會fallback至target。
http-proxy-middleware router配置源碼
配置校驗源碼
我們可以使用proxy中router來讀取我們的代理配置文件，這樣就可以實現(xiàn)修改代理配置文件來更新代理地址，無須啟動項目。
3. 配置
在vue.config.js中加入如下配置：
// vue.config.js
const dynamicProxy = require('./environments/proxy.js')
const port = process.env.port || process.env.npm_config_port || 80 // 端口
module.exports = {
lintOnSave: false,
devServer: {
host: '0.0.0.0',
port,
open: false,
proxy: dynamicProxy.proxy,
disableHostCheck: true
},
}
新建environments文件夾，同時在里面新建proxy.js文件
// proxy.js
const fs = require('fs')
const path = require('path')
const encoding = 'utf-8'
/**
* 獲取配置文件內(nèi)容 getContent('proxy-config.json')
* @param filename env.json
* @returns {string}
*/
const getContent = filename => {
const dir = path.resolve(process.cwd(), 'environments')
return fs.readFileSync(path.resolve(dir, filename), { encoding })
}
const jsonParse = obj => {
return Function('"use strict";return (' + obj + ')')()
}
/**
* 獲取配置選項 getConfig()
* @returns {{}|*}
*/
const getConfig = () => {
try {
return jsonParse(getContent('proxy-config.json'))
} catch (e) {
return {}
}
}
module.exports = {
proxy: {
// 接口匹配規(guī)則自行修改
['/my-api']: {
target: 'that must have a empty placeholder', // 這里必須要有字符串來進(jìn)行占位
changeOrigin: true,
router: () => (getConfig() || {}).target || ''
}
}
}
proxy.js最后導(dǎo)出一個對象，這個對象跟我們以前使用的舊代理方案很像，但是多了一個router配置，router函數(shù)返回執(zhí)行getConfig函數(shù)讀取配置文件的內(nèi)容，也就是我們的代理地址。
在environments目錄下新建我們的代理配置文件proxy-config.json：
{
"target": "https://www.baidu.com"
}
當(dāng)項目啟動后，會讀取我們的代理配置文件。我們在項目啟動后，手動修改代理配置文件的代理地址，然后刷新頁面，就可以使我們的新代理地址生效。
示例demo
以上就是vue動態(tài)代理無須重啟項目解決方案詳解的詳細(xì)內(nèi)容，更多關(guān)于vue 動態(tài)代理的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
在實際開發(fā)中每個開發(fā)者應(yīng)該都有經(jīng)歷過對組件進(jìn)行二次封裝,本文將從三個方面來基于 Element UI 的el-input組件簡單實現(xiàn)一下組件的二次封裝,有需要的可以參考下2023-09-09
Vue引入并使用Element組件庫的兩種方式小結(jié)
本文主要介紹了Vue引入并使用Element組件庫的兩種方式小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
這篇文章主要介紹了 解決Vue打包后訪問圖片/圖標(biāo)不顯示的問題，本文給大家介紹的非常詳細(xì)，具有一定的參考解決價值,需要的朋友可以參考下2019-07-07
詳解vue-template-admin三級路由無法緩存的解決方案
這篇文章主要介紹了vue-template-admin三級路由無法緩存的解決方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章主要為大家詳細(xì)介紹了Vue?Validate表單組件的封裝的相關(guān)知識,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起了解下2023-09-09
這篇文章主要介紹了vue之監(jiān)聽頁面是否以到底部問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)移動端圖片裁剪上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
淺談vue在html中出現(xiàn){{}}的原因及解決方式
這篇文章主要介紹了淺談vue在html中出現(xiàn){{}}的原因及解決方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了Vue中引入echarts的步驟及折線圖、柱狀圖常見配置項,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了在antd Table中插入可編輯的單元格實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10