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中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
vue中defineProperty和Proxy的区别详解
Nov 30 Vue.js
vue中利用three.js实现全景图的完整示例
Dec 07 Vue.js
vue+element实现动态加载表单
Dec 13 Vue.js
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
基于vuex实现购物车功能
Jan 10 Vue.js
vue实现可移动的悬浮按钮
Mar 04 Vue.js
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
Vue接口封装的完整步骤记录
May 14 Vue.js
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
vue使用localStorage持久性存储实现评论列表
Apr 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
收音机怀古---春雷3P7图片欣赏
2021/03/02 无线电
常见的PHP五种设计模式小结
2011/03/23 PHP
PHP中的gzcompress、gzdeflate、gzencode函数详解
2014/07/29 PHP
PHP基于自增数据如何生成不重复的随机数示例
2017/05/19 PHP
PHP单例模式简单用法示例
2017/06/23 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
权威JavaScript 中的内存泄露模式
2007/08/13 Javascript
JavaScript Object的extend是一个常用的功能
2009/12/02 Javascript
深入理解javaScript中的事件驱动
2013/05/21 Javascript
JS中eval函数的使用示例
2013/07/21 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
2014/12/01 Javascript
Node.js中的缓冲与流模块详细介绍
2015/02/11 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
2016/07/27 Javascript
利用vscode编写vue的简单配置详解
2017/06/17 Javascript
nodeJS模块简单用法示例
2018/04/21 NodeJs
JavaScript常用数组操作方法,包含ES6方法
2020/05/10 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
2020/01/26 Javascript
Python语言的12个基础知识点小结
2014/07/10 Python
Python基础之函数的定义与使用示例
2019/03/23 Python
Python语法分析之字符串格式化
2019/06/13 Python
弄懂这56个Python使用技巧(轻松掌握Python高效开发)
2019/09/18 Python
wxpython绘制圆角窗体
2019/11/18 Python
keras获得model中某一层的某一个Tensor的输出维度教程
2020/01/24 Python
django实现将后台model对象转换成json对象并传递给前端jquery
2020/03/16 Python
Python3 hashlib密码散列算法原理详解
2020/03/30 Python
CSS3实现瀑布流布局与无限加载图片相册的实例代码
2016/12/22 HTML / CSS
英国最大的在线时尚眼镜店:Eyewearbrands
2019/03/12 全球购物
麦当劳印度网上订餐:McDelivery
2020/03/16 全球购物
求职简历中的自我评价分享
2013/12/08 职场文书
新农村建设汇报材料
2014/08/15 职场文书
2014年小学少先队工作总结
2014/12/18 职场文书
2015年招生工作总结
2015/05/04 职场文书
文明和谐家庭事迹材料(2016精选版)
2016/02/29 职场文书
承诺书的签字人,需不需要承担相应的责任?
2019/07/09 职场文书
Python的flask接收前台的ajax的post数据和get数据的方法
2021/04/12 Python
提高系统的吞吐量解决数据库重复写入问题
2022/04/23 MySQL