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修改代理配置，不需要重啟專案，直接重新整理瀏覽器即可。

交流群