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 相关文章推荐
springboot+vue实现文件上传下载
Nov 17 Vue.js
vue element实现表格合并行数据
Nov 30 Vue.js
Vue router安装及使用方法解析
Dec 02 Vue.js
vue 动态创建组件的两种方法
Dec 31 Vue.js
vue使用过滤器格式化日期
Jan 20 Vue.js
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
详解vue身份认证管理和租户管理
May 25 Vue.js
Axios代理配置及封装响应拦截处理方式
Apr 07 Vue.js
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 Vue.js
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
vue3种table表格选项个数的控制方法
Apr 14 Vue.js
vue递归实现树形组件
Jul 15 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中长文章分页显示实现代码
2012/09/29 PHP
Yii PHP Framework实用入门教程(详细介绍)
2013/06/18 PHP
smarty高级特性之过滤器的使用方法
2015/12/25 PHP
PHP的Yii框架中使用数据库的配置和SQL操作实例教程
2016/03/17 PHP
Thinkphp3.2.3分页使用实例解析
2016/07/28 PHP
jquery 绑定回车动作扑捉回车键触发的事件
2014/03/26 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
2014/05/05 Javascript
限制上传文件大小和格式的jQuery插件实例
2015/01/24 Javascript
js调用百度地图及调用百度地图的搜索功能
2015/09/07 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
2016/05/21 Javascript
巧用数组制作图片切换js代码
2016/11/29 Javascript
jquery实现放大镜简洁代码(推荐)
2017/06/08 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
2018/01/02 jQuery
Vue 表情包输入组件的实现代码
2019/01/21 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
2019/08/21 Javascript
Vue SPA 初次进入加载动画实现代码
2019/11/14 Javascript
python中enumerate函数用法实例分析
2015/05/20 Python
Python中文字符串截取问题
2015/06/15 Python
python通过文件头判断文件类型
2015/10/30 Python
Python实现的简单线性回归算法实例分析
2018/12/26 Python
Python实现二维曲线拟合的方法
2018/12/29 Python
新版Pycharm中Matplotlib不会弹出独立的显示窗口的问题
2020/06/02 Python
使用Dajngo 通过代码添加xadmin用户和权限(组)
2020/07/03 Python
python给视频添加背景音乐并改变音量的具体方法
2020/07/19 Python
基于Python爬取京东双十一商品价格曲线
2020/10/23 Python
HTML5 source标签:媒介元素定义媒介资源
2018/01/29 HTML / CSS
如何进行Linux分区优化
2016/09/13 面试题
信息部岗位职责
2013/11/12 职场文书
劳动工资科岗位职责范本
2014/03/02 职场文书
语文高效课堂实施方案
2014/05/03 职场文书
暑期培训班招生方案
2014/08/26 职场文书
2014年乡镇卫生院工作总结
2014/11/24 职场文书
检讨书格式范文
2015/05/07 职场文书
2016年安康杯竞赛活动总结
2016/04/05 职场文书
Go语言基础知识点介绍
2021/07/04 Golang
i5-10400f处理相当于i7多少水平
2022/04/19 数码科技