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 elementUI 使用el-select 时 change事件的触发问题
Nov 17 Vue.js
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
Vue——前端生成二维码的示例
Dec 19 Vue.js
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
如何在vue 中使用柱状图 并自修改配置
Jan 21 Vue.js
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
vue-cli4.5.x快速搭建项目
May 30 Vue.js
Vue图片裁剪组件实例代码
Jul 02 Vue.js
深入讲解Vue中父子组件通信与事件触发
Mar 22 Vue.js
Vue+TypeScript中处理computed方式
Apr 02 Vue.js
vue postcss-px2rem 自适应布局
May 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 define函数的使用说明
2008/08/27 PHP
CentOS 6.3下安装PHP xcache扩展模块笔记
2014/09/10 PHP
PHP封装的字符串加密解密函数
2015/12/18 PHP
PHP正则匹配操作简单示例【preg_match_all应用】
2017/07/10 PHP
js中的escape及unescape函数的php实现代码
2007/09/04 Javascript
js动态添加onclick事件可传参数与不传参数
2014/07/29 Javascript
Nodejs学习笔记之Global Objects全局对象
2015/01/13 NodeJs
使用jquery实现仿百度自动补全特效
2015/07/23 Javascript
js实现带圆角的两级导航菜单效果代码
2015/08/24 Javascript
js实现的简洁网页滑动tab菜单效果代码
2015/08/24 Javascript
基于jQuery实现仿微博发布框字数提示
2016/07/27 Javascript
Validform表单验证总结篇
2016/10/31 Javascript
微信小程序 wxapp画布 canvas详细介绍
2016/10/31 Javascript
原生JS和jQuery操作DOM对比总结
2017/01/19 Javascript
AngularJS 异步解决实现方法
2017/06/12 Javascript
写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab
2018/03/06 Javascript
webpack本地开发环境无法用IP访问的解决方法
2018/03/20 Javascript
JS实现网页端猜数字小游戏
2020/03/06 Javascript
关于element-ui表单中限制输入纯数字的解决方式
2020/09/08 Javascript
[01:08]DOTA2次级职业联赛 - Wings 战队宣传片
2014/12/01 DOTA
[06:43]2018DOTA2国际邀请赛寻真——VGJ.Thunder
2018/08/11 DOTA
浅谈Python2获取中文文件名的编码问题
2018/01/09 Python
如何使用 Pylint 来规范 Python 代码风格(来自IBM)
2018/04/06 Python
基于python的docx模块处理word和WPS的docx格式文件方式
2020/02/13 Python
python tqdm 实现滚动条不上下滚动代码(保持一行内滚动)
2020/02/19 Python
Python文件时间操作步骤代码详解
2020/04/13 Python
总结Pyinstaller的坑及终极解决方法(小结)
2020/09/21 Python
英国珠宝钟表和家居礼品精品店:David Shuttle
2018/02/24 全球购物
一家外企的面试题目(C/C++面试题,C语言面试题)
2014/03/24 面试题
小学新学期教师寄语
2014/01/18 职场文书
大二学习计划书范文
2014/04/27 职场文书
假面舞会策划方案
2014/05/29 职场文书
小学生教师节演讲稿
2014/09/03 职场文书
单位租车协议书
2015/01/29 职场文书
Python OpenCV超详细讲解基本功能
2022/04/02 Python
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/06 PostgreSQL