vue/cli 配置动态代理无需重启服务的方法


Posted in Vue.js onMay 20, 2022

vue脚手架指的是vue-cli,它是一个专门为单页面应用快速搭建繁杂的脚手架,它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。

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

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。

http-proxy-middleware router配置源码

vue/cli 配置动态代理无需重启服务的方法

配置校验源码

vue/cli 配置动态代理无需重启服务的方法

可以由上面源码看出首先会校验配置,如果targetrouter都不存在的话,就会直接Error,从第一张图片源码可以看出,如果router存在的话,则会直接新建一个newTarget,并且将options.target赋值为newTarget

到此这篇关于vue/cli 配置动态代理,无需重启服务的文章就介绍到这了!


Tags in this post...

Vue.js 相关文章推荐
Vue 打包的静态文件不能直接运行的原因及解决办法
Nov 19 Vue.js
如何实现vue的tree组件
Dec 03 Vue.js
vue穿梭框实现上下移动
Jan 29 Vue.js
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
vue3中的组件间通信
Mar 31 Vue.js
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
关于Vue Router的10条高级技巧总结
May 06 Vue.js
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
vue+iview实现手机号分段输入框
Mar 25 Vue.js
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 Vue.js
vue.js 使用原生js实现轮播图
Apr 26 Vue.js
Vue3实现简易音乐播放器组件
Aug 14 Vue.js
Vue ECharts实现机舱座位选择展示功能
May 15 #Vue.js
Vue组件化(ref,props, mixin,.插件)详解
vue postcss-px2rem 自适应布局
May 15 #Vue.js
VUE解决跨域问题Access to XMLHttpRequest at
vue使用watch监听属性变化
Apr 30 #Vue.js
vue-cli3.x配置全局的scss的时候报错问题及解决
vue项目如何打包之项目打包优化(让打包的js文件变小)
You might like
PHP 5.3.0 安装分析心得
2009/08/07 PHP
使用php验证复选框有效性的示例
2013/11/13 PHP
Yii2 rbac权限控制之rule教程详解
2016/06/23 PHP
[原创]php使用strpos判断字符串中数字类型子字符串出错的解决方法
2017/04/01 PHP
JavaScript 克隆数组最简单的方法
2009/02/12 Javascript
struts2 jquery 打造无限层次的树
2009/10/23 Javascript
默认让页面的第一个控件选中的javascript代码
2009/12/26 Javascript
window.open的页面如何刷新(父页面)上层页面
2012/12/28 Javascript
JS替换文本域内的回车示例
2014/02/18 Javascript
谷歌地图打不开的解决办法
2014/08/07 Javascript
jQuery中:gt选择器用法实例
2014/12/29 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
2016/09/19 Javascript
bootstrapfileinput实现文件自动上传
2016/11/08 Javascript
js实现手机发送验证码功能
2017/03/13 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
2017/08/25 Javascript
Webpack 服务器端代码打包的示例代码
2017/09/19 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
2018/04/22 Javascript
Node.js API详解之 console模块用法详解
2020/05/12 Javascript
vue+element table表格实现动态列筛选的示例代码
2021/01/14 Vue.js
NetworkX之Prim算法(实例讲解)
2017/12/22 Python
Python 判断 有向图 是否有环的实例讲解
2018/02/01 Python
pytorch 使用单个GPU与多个GPU进行训练与测试的方法
2019/08/19 Python
python selenium实现发送带附件的邮件代码实例
2019/12/10 Python
python爬虫用mongodb的理由
2020/07/28 Python
HTML5 canvas基本绘图之绘制线条
2016/06/27 HTML / CSS
html5 冒号分隔符对齐的实现
2019/07/31 HTML / CSS
SmartBuyGlasses英国:购买太阳镜和眼镜
2018/01/29 全球购物
医学专业大学生求职的自我评价
2013/11/27 职场文书
婚前协议书怎么写
2014/04/15 职场文书
职业生涯规划书前言
2014/04/15 职场文书
决心书格式范文
2015/09/23 职场文书
九年级历史教学反思
2016/02/19 职场文书
浅谈Laravel中使用Slack进行异常通知
2021/05/29 PHP
python可视化之颜色映射详解
2021/09/15 Python
Python IO文件管理的具体使用
2022/03/20 Python
instantclient客户端 连接oracle数据库
2022/04/26 Oracle