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

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

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

// 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 || ''
    }
  }
}

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