vue/cli 配置动态代理，无需重启服务

vue/cli 配置动态代理，无需重启服务已关闭评论
386 次浏览

A+

所属分类：Web前端

摘要

使用vue/cli@5创建的项目，默认会创建vue.config.js文件，如果项目中没有此文件，那么就手动在项目根路径创建vue.config.js文件。

devServe = http://localhost:3000; prodServe = http://localhost:4000;

1. 在vue.config.js文件中，配置代理服务

使用vue/cli@5创建的项目，默认会创建vue.config.js文件，如果项目中没有此文件，那么就手动在项目根路径创建vue.config.js文件。

const { defineConfig } = require('@vue/cli-service'); const createProxy = require('./dynamic_proxy');  module.exports = defineConfig({     transpileDependencies: true,     devServer: {         proxy: {             '/': {                 target: '',                 ws: false,                 changeOrigin: true,                 router: () => {                     return createProxy();                 }             }         }     } });

2. 在项目根路径创建文件夹`dynamic_proxy`，并创建`proxy.list.json`文件以及`index.js`文件。

proxy.list.json

[     {         "name": "devServe",         "ip": "http://xxx.xxx.xxx.xxx:3001",         "active": true     },     {         "name": "prodServe",         "ip": "http://xxx.xxx.xxx.xxx:3000",         "active": false     } ]

index.js

const { readFileSync } = require('fs'); const { resolve } = require('path');  const getProxyList = () => {     try {         const proxyList = readFileSync(resolve(__dirname, './proxy.list.json'), 'utf-8');         return JSON.parse(proxyList);     } catch (error) {         throw new Error(error);     } };  const getActiveProxy = () => {     try {         const proxyList = getProxyList();         if (proxyList.some(i => i.active)) {             return proxyList.find(i => i.active);         }     } catch (error) {         throw new Error(error);     } };  module.exports = () => {     return getActiveProxy().ip; };

3. 运行命令 `npm run serve`

4. 需要切换服务时，直接修改`proxy.list.json`中的`active`选项，修改为`true`,就可以自动切换了

5. 原理解析

vue cli 的代理是使用的http-proxy-middleware包，所以proxy选项的配置也是基于这个包的配置。在proxy配置选项中有两个属性target以及router。其中target是默认的代理地址。而router可以return一个字符串服务地址，那么当两个选项都配置了时，http-proxy-middleware在解析配置时，会首先使用router函数的返回值，当router的返回值不可以用时，那么就会fallback至target。