关于前端:Vue修改代理无需重启项目解决方式

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 批改代理配置，不须要重启我的项目，间接刷新浏览器即可。

交换群