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 24 Vue.js
vue编写简单的购物车功能
Jan 08 Vue.js
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
Vue图片裁剪组件实例代码
Jul 02 Vue.js
vue使用Google Recaptcha验证的实现示例
Aug 23 Vue.js
vue+echarts实现多条折线图
Mar 21 Vue.js
使用vuex-persistedstate本地存储vuex
Apr 29 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
Discuz 5.0 中读取纯真IP数据库函数分析
2007/03/16 PHP
php实现字符串翻转的方法
2015/03/27 PHP
javascript语句中的CDATA标签的意义
2007/05/09 Javascript
Mootools 1.2教程 输入过滤第二部分(字符串)
2009/09/15 Javascript
基于jquery的商品展示放大镜
2010/08/07 Javascript
IE6 fixed的完美解决方案
2011/03/31 Javascript
js判断文本框剩余可输入字数的方法
2015/02/04 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
2015/04/14 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
2015/09/12 Javascript
javascript函数的四种调用模式
2017/01/08 Javascript
JavaScript使用prototype原型实现的封装继承多态示例
2018/08/31 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
2018/10/20 Javascript
js实现随机8位验证码
2020/07/24 Javascript
解决VUEX的mapState/...mapState等取值问题
2020/07/24 Javascript
vue实现给div绑定keyup的enter事件
2020/07/31 Javascript
Vue中引入svg图标的两种方式
2021/01/14 Vue.js
python私有属性和方法实例分析
2015/01/15 Python
Python实现删除Android工程中的冗余字符串
2015/01/19 Python
基于python实现的抓取腾讯视频所有电影的爬虫
2016/04/22 Python
python获取文件路径、文件名、后缀名的实例
2018/04/23 Python
Python实现去除列表中重复元素的方法小结【4种方法】
2018/04/27 Python
django admin后台添加导出excel功能示例代码
2019/05/15 Python
Django使用中间键实现csrf认证详解
2019/07/22 Python
python数据处理之如何选取csv文件中某几行的数据
2019/09/02 Python
PyTorch的自适应池化Adaptive Pooling实例
2020/01/03 Python
pytorch 获取tensor维度信息示例
2020/01/03 Python
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
2016/05/09 HTML / CSS
html5 canvas 实现光线沿不规则路径运动
2020/04/20 HTML / CSS
bonprix匈牙利:女士、男士和儿童服装
2019/07/19 全球购物
新春寄语大全
2014/04/09 职场文书
励志演讲稿800字
2014/08/21 职场文书
客户答谢会活动方案
2014/08/31 职场文书
2015年重阳节活动主持词
2015/07/30 职场文书
学习党章心得体会2016
2016/01/15 职场文书
「我的青春恋爱物语果然有问题。-妄言录-」第20卷封面公开
2022/03/21 日漫
Python OpenCV之常用滤波器使用详解
2022/04/07 Python