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 22 Vue.js
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
vue3.0中setup使用(两种用法)
Dec 02 Vue.js
对vue生命周期的深入理解
Dec 03 Vue.js
vue+element实现动态加载表单
Dec 13 Vue.js
Vue——解决报错 Computed property "****" was assigned to but it has no setter.
Dec 19 Vue.js
vue中父子组件的参数传递和应用示例
Jan 04 Vue.js
vue watch监控对象的简单方法示例
Jan 07 Vue.js
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
Vue3.0写自定义指令的简单步骤记录
Jun 27 Vue.js
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
vue elementUI批量上传文件
Apr 26 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
10条PHP编程习惯助你找工作
2008/09/29 PHP
php用正则表达式匹配URL的简单方法
2013/11/12 PHP
php对象在内存中的存在形式分析
2015/02/03 PHP
微信支付PHP SDK ―― 公众号支付代码详解
2016/09/13 PHP
JavaScript DOM 添加事件
2009/02/14 Javascript
jQuery Lightbox 图片展示插件使用说明
2010/04/25 Javascript
script标签的 charset 属性使用说明
2010/12/04 Javascript
基于jquery库的tab新形式使用
2012/11/16 Javascript
jquery动态加载select下拉框示例代码
2013/12/10 Javascript
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
jQuery Easyui datagrid/treegrid 清空数据
2016/07/09 Javascript
Backbone中View之间传值的学习心得
2016/08/09 Javascript
轻松掌握JavaScript中介者模式
2016/08/26 Javascript
EditPlus中的正则表达式 实战(4)
2016/12/15 Javascript
浅析bootstrap原理及优缺点
2017/03/19 Javascript
浅谈Vue组件单元测试究竟测试什么
2020/02/05 Javascript
详解Node.js使用token进行认证的简单示例
2020/05/25 Javascript
js+canvas实现转盘效果(两个版本)
2020/09/13 Javascript
[50:12]EG vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
PyCharm设置SSH远程调试的方法
2018/07/17 Python
解决Python 命令行执行脚本时,提示导入的包找不到的问题
2019/01/19 Python
Python3内置模块pprint让打印比print更美观详解
2019/06/02 Python
基于tensorflow指定GPU运行及GPU资源分配的几种方式小结
2020/02/03 Python
python实现随机加减法生成器
2020/02/24 Python
Python实现CAN报文转换工具教程
2020/05/05 Python
css3 给背景设置渐变色的方法
2019/09/12 HTML / CSS
法国面料和小百货在线商店:Mondial Tissus
2019/03/23 全球购物
《孔繁森》教学反思
2014/04/17 职场文书
工会主席事迹材料
2014/06/03 职场文书
债务纠纷代理词
2015/05/25 职场文书
葬礼主持词
2015/07/02 职场文书
《学会生存》读后感3篇
2019/12/09 职场文书
MySQL非空约束(not null)案例讲解
2021/08/23 MySQL
Vue组件更新数据v-model不生效的解决
2022/04/02 Vue.js
Golang ort 中的sortInts 方法
2022/04/24 Golang