场景

vue2的版本本地开发调用多人的后台地址以及不同开发环境的切换，频繁多次的切换地址，在config.js里面改变地址需要重新重启项目，为了切换地址不重启项目，当然新项目可以用vite自动重启。这里说的是使用webpack的老项目。网上的案列在这里记录整理一下

新建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: {
  // 接口匹配规则自行修改  这里可以根据需求来多配置一些代理地址
    [process.env.VUE_APP]: {//代理地址1
      target: 'that must have a empty placeholder', // 这里必须要有字符串来进行占位 
      changeOrigin: true, 
      router: () => (getConfig() || {}).target || '' ，//代理地址1
      pathRewrite: {
          ['^/api']:''
        }
      } 
    }，
    [process.env.VUE_APP2]: {//代理地址2
      target: 'that must have a empty placeholder', // 这里必须要有字符串来进行占位 
      changeOrigin: true, 
      router: () => (getConfig() || {}).target2 || '' ，//代理地址2
       pathRewrite: {
          ['^']:''
        }
      } 
    }
  }

在environments文件夹里面新建代理配置文件proxy-config.json

{ 
    "target": "https://www.baidu.com"，//代理地址1
    "target2": "https://www.baidus.com"//代理地址2 可以根据需求写多个代理
}

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

vue动态代理无须重启项目的解决方案

场景