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)文章
這篇文章主要給大家介紹了關(guān)于如何基于Vue-cli快速搭建項目的完整步驟，文中通過示例代碼以及圖片將搭建的步驟一步步介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
vue.config.js配置報錯解決辦法(可能是與webpack混淆)
在Vue.js開發(fā)過程中,vue.config.js文件是用于配置項目的,特別是對于開發(fā)環(huán)境的設(shè)置,這篇文章主要給大家介紹了關(guān)于vue.config.js配置報錯解決的相關(guān)資料,可能是與webpack混淆,需要的朋友可以參考下2024-06-06
本篇文章主要介紹了VUE實現(xiàn)表單元素雙向綁定（總結(jié)） ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
vue 如何將二維數(shù)組轉(zhuǎn)化為一維數(shù)組
這篇文章主要介紹了vue 如何將二維數(shù)組轉(zhuǎn)化為一維數(shù)組，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
路由懶加載是一種優(yōu)化Vue應(yīng)用程序性能的技術(shù)，本文介紹了Vue中如何進(jìn)行路由懶加載，包括使用Vue異步組件和Webpack代碼分割,需要的朋友可以參考下2023-06-06
混入（Mixin）是?Vue?中一種代碼復(fù)用的模式,允許將組件的選項抽離為獨立模塊,下面就跟隨小編一起來深入了解下如何在Vue3中使用混入Mixin吧2025-03-03
這篇文章主要介紹了基于vue-cli搭建多模塊且各模塊獨立打包的項目,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-06-06
vue如何設(shè)置動態(tài)的柵格占位、水平偏移量、類名、樣式
這篇文章主要介紹了vue如何設(shè)置動態(tài)的柵格占位、水平偏移量、類名、樣式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue報錯error:0308010C:digital?envelope?routines::unsupported
這篇文章主要給大家介紹了關(guān)于Vue報錯error:0308010C:digital?envelope?routines::unsupported的解決方法,文中通過圖文將解決的辦法介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
vue使用keep-alive無效以及include和exclude用法解讀
這篇文章主要介紹了vue使用keep-alive無效以及include和exclude用法解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07