vue動態代理無須重啟項目解決方案詳解

Posted on by

1.背景

當我們vue構建項目的時候，都會在vue.config.js中配置我們需要代理的服務器地址。有時候我們需要使用不同後端服務器地址，也就是我們開發中所說的測試環境、灰度環境、正式環境等，這個時候如果我們需要使用不同的環境地址的時候，就需要使用命令或者手動修改vue.config.js中配置來重新啟動項目。當項目項目越來越大的時候，我們需要很長的時間來啟動項目，如此反復，極大影響我們開發進度。這個時候我們急需一種vue動態代理無須重啟項目解決方案來提高我們的開發項目，以此為背景，萌生出瞭以下方案。

2.技術方案

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,
      }
    }
  }
}

在啟動項目的時候，隻會讀取一次配置文件，當再次修改target地址時，vue-cli是無法感知文件的變化，所以代理的還是舊的地址，所以我們需要重新啟動項目來使配置生效。有沒有一種方案，可以在修改配置的時候能使vue-cli感知到文件的變化，從而讀取新的配置呢？方案入下：

2.2 新的配置方案思路

vue-cli 的代理是使用的http-proxy-middleware包，所以proxy選項的配置也是基於這個包的配置。在proxy配置選項中有兩個屬性target以及router。其中target是默認的代理地址。而router可以return一個字符串服務地址，那麼當兩個選項都配置瞭時，http-proxy-middleware在解析配置時，會首先使用router函數的返回值，當router的返回值不可以用時，那麼就會fallback至target。

http-proxy-middleware router配置源碼

配置校驗源碼

我們可以使用proxy中router來讀取我們的代理配置文件，這樣就可以實現修改代理配置文件來更新代理地址，無須啟動項目。

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'
/**
 * 獲取配置文件內容 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: {
  	// 接口匹配規則自行修改
    ['/my-api']: {
      target: 'that must have a empty placeholder', // 這裡必須要有字符串來進行占位
      changeOrigin: true,
      router: () => (getConfig() || {}).target || ''
    }
  }
}

proxy.js最後導出一個對象，這個對象跟我們以前使用的舊代理方案很像，但是多瞭一個router配置，router函數返回執行getConfig函數讀取配置文件的內容，也就是我們的代理地址。

在environments目錄下新建我們的代理配置文件proxy-config.json：

{
    "target": "https://www.baidu.com"
}

當項目啟動後，會讀取我們的代理配置文件。我們在項目啟動後，手動修改代理配置文件的代理地址，然後刷新頁面，就可以使我們的新代理地址生效。

示例demo

github.com/atdow/vue-d…

以上就是vue動態代理無須重啟項目解決方案詳解的詳細內容，更多關於vue 動態代理的資料請關註WalkonNet其它相關文章！

推薦閱讀：