Vue 代理无需重启我的项目解决形式

问题形容

在应用 vue-cli3 创立我的项目时，如果在 vue.config.js 中配置了代理，那么在开发环境下，每次批改代理配置后都须要重启我的项目能力失效，这样就会造成开发效率的升高，因而须要解决这个问题。

vue 的代理是通过 http-proxy-middleware 实现的，它的原理是在开发环境下，通过 webpack-dev-server 启动一个 express 服务器，而后通过 http-proxy-middleware 将申请转发到指标服务器，因而，咱们只须要在开发环境下，将 http-proxy-middleware 的配置写入到 webpack-dev-server 的配置中即可。

旧计划

在 vue.config.js 中配置如下代码：

devServer: {    proxy: {      '/api': {        target: 'http://localhost:3000',        changeOrigin: true,        pathRewrite: {          '^/api': ''        }      },       '/message': {        target: 'http://localhost:6000',        changeOrigin: true,        pathRewrite: {          '^/message': ''        }      }    }  }

这样就能够在开发环境下，通过/api 拜访 3000 端口的服务，通过/message 拜访 6000 端口的服务。然而，每次批改代理配置后都须要重启我的项目能力失效。

新计划

咱们应用http-proxy-middleware的router属性，它的优先级高于target，因而，咱们能够通过router属性来实现动静代理，具体革新如下：

新的目录构造如下：

  ...  ...+ ├──proxy.js+ ├──proxy-config.js  ├──vue.config.js

咱们将proxy.js和proxy-config.js放在根目录下，而后在 vue.config.js 中引入 proxy.js，具体代码如下：

vue.config.js
const proxy = require('./proxy')devServer: {  proxy: proxy}
proxy.js
const fs = require('fs')function looseJsonParse(obj) {  return Function('"use strict";return (' + obj + ')')()}let currentProxy = ''function getUrl(key) {  const router = fs.readFileSync('./proxy-config.js', 'utf8')  const a = router.indexOf('{')  const b = router.lastIndexOf('}')  const proxy = looseJsonParse(router.substring(a, b + 1))  if (currentProxy !== proxy[key]) {    console.log(`${key} proxy changed =>`, proxy[key])  }  currentProxy = proxy[key]  return proxy[key]}module.exports = { '/api': {    target: 'target',// 这个字段必须有    router: () => getUrl('api'),    changeOrigin: true,    pathRewrite: {      '^/api': ''    }  },  '/message': {    target: 'target',    router: () => getUrl('message'),    changeOrigin: true,    pathRewrite: {      '^/message': ''    }  }}
proxy-config.js
/** * 代理配置，批改完代理后，不须要重启我的项目，间接刷新浏览器即可 * 不应用json文件的起因是，json文件无奈正文，不利于保护 * https://github.com/chimurai/http-proxy-middleware#router-objectfunction */const proxy = {  /**   * api   */  api: 'http://localhost:3000', //dev  // api: 'http://localhost:3001', //sit  /**   * message   */  message: 'http://localhost:6000', //dev  // message: 'http://localhost:6001', //sit}

测试

启动我的项目，而后在proxy-config.js批改代理配置，不须要重启我的项目，间接刷新浏览器即可。

交换群