1.背景

當(dāng)我們vue構(gòu)建項(xiàng)目的時(shí)候，都會(huì)在vue.config.js中配置我們需要代理的服務(wù)器地址。有時(shí)候我們需要使用不同后端服務(wù)器地址，也就是我們開(kāi)發(fā)中所說(shuō)的測(cè)試環(huán)境、灰度環(huán)境、正式環(huán)境等，這個(gè)時(shí)候如果我們需要使用不同的環(huán)境地址的時(shí)候，就需要使用命令或者手動(dòng)修改vue.config.js中配置來(lái)重新啟動(dòng)項(xiàng)目。當(dāng)項(xiàng)目項(xiàng)目越來(lái)越大的時(shí)候，我們需要很長(zhǎng)的時(shí)間來(lái)啟動(dòng)項(xiàng)目，如此反復(fù)，極大影響我們開(kāi)發(fā)進(jìn)度。這個(gè)時(shí)候我們急需一種vue動(dòng)態(tài)代理無(wú)須重啟項(xiàng)目解決方案來(lái)提高我們的開(kāi)發(fā)項(xiàng)目，以此為背景，萌生出了以下方案。

2.技術(shù)方案

2.1 舊的配置方案

我們?cè)?code>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)項(xiàng)目的時(shí)候，只會(huì)讀取一次配置文件，當(dāng)再次修改target地址時(shí)，vue-cli是無(wú)法感知文件的變化，所以代理的還是舊的地址，所以我們需要重新啟動(dòng)項(xiàng)目來(lái)使配置生效。有沒(méi)有一種方案，可以在修改配置的時(shí)候能使vue-cli感知到文件的變化，從而讀取新的配置呢？方案入下：

2.2 新的配置方案思路

vue-cli 的代理是使用的http-proxy-middleware包，所以proxy選項(xiàng)的配置也是基于這個(gè)包的配置。在proxy配置選項(xiàng)中有兩個(gè)屬性target以及router。其中target是默認(rèn)的代理地址。而router可以return一個(gè)字符串服務(wù)地址，那么當(dāng)兩個(gè)選項(xiàng)都配置了時(shí)，http-proxy-middleware在解析配置時(shí)，會(huì)首先使用router函數(shù)的返回值，當(dāng)router的返回值不可以用時(shí)，那么就會(huì)fallback至target。

http-proxy-middleware router配置源碼

配置校驗(yàn)源碼

我們可以使用proxy中router來(lái)讀取我們的代理配置文件，這樣就可以實(shí)現(xiàn)修改代理配置文件來(lái)更新代理地址，無(wú)須啟動(dòng)項(xiàng)目。

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文件夾，同時(shí)在里面新建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 + ')')()
}
/**
 * 獲取配置選項(xiàng) 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', // 這里必須要有字符串來(lái)進(jìn)行占位
      changeOrigin: true,
      router: () => (getConfig() || {}).target || ''
    }
  }
}

proxy.js最后導(dǎo)出一個(gè)對(duì)象，這個(gè)對(duì)象跟我們以前使用的舊代理方案很像，但是多了一個(gè)router配置，router函數(shù)返回執(zhí)行getConfig函數(shù)讀取配置文件的內(nèi)容，也就是我們的代理地址。

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

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

當(dāng)項(xiàng)目啟動(dòng)后，會(huì)讀取我們的代理配置文件。我們?cè)陧?xiàng)目啟動(dòng)后，手動(dòng)修改代理配置文件的代理地址，然后刷新頁(yè)面，就可以使我們的新代理地址生效。

示例demo

github.com/atdow/vue-d…

以上就是vue動(dòng)態(tài)代理無(wú)須重啟項(xiàng)目解決方案詳解的詳細(xì)內(nèi)容，更多關(guān)于vue 動(dòng)態(tài)代理的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論