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 element实现表格合并行数据
Nov 30 Vue.js
vue监听滚动事件的方法
Dec 21 Vue.js
vue 实现图片懒加载功能
Dec 31 Vue.js
vue动态设置路由权限的主要思路
Jan 13 Vue.js
Vue+Bootstrap实现简易学生管理系统
Feb 09 Vue.js
Vue基本指令实例图文讲解
Feb 25 Vue.js
vue中axios封装使用的完整教程
Mar 03 Vue.js
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
详解Vue的options
May 15 Vue.js
解读Vue组件注册方式
May 15 Vue.js
Vue3.0 手写放大镜效果
Jul 25 Vue.js
Vue OpenLayer测距功能的实现
Apr 20 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
Zend Framework框架之Zend_Mail实现发送Email邮件验证功能及解决标题乱码的方法
2016/03/21 PHP
laravel-admin 后台表格筛选设置默认的查询日期方法
2019/10/03 PHP
实用javaScript技术-屏蔽类
2006/08/15 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
2013/12/12 Javascript
一个简单的动态加载js和css的jquery代码
2014/09/01 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
2015/03/20 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
2015/06/01 Javascript
常用的Javascript数据验证插件
2015/08/04 Javascript
纯JavaScript代码实现移动设备绘图解锁
2015/10/16 Javascript
json的使用小结
2016/06/08 Javascript
WEB前端实现裁剪上传图片功能
2016/10/17 Javascript
微信小程序 MD5加密登录密码详解及实例代码
2017/01/12 Javascript
JS简单添加元素新节点的方法示例
2018/02/10 Javascript
微信小程序实现留言板(Storage)
2018/11/02 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
2019/03/19 Javascript
Vue+Java+Base64实现条码解析的示例
2020/09/23 Javascript
[04:12]第二届DOTA2亚洲邀请赛选手传记-Newbee.Sccc
2017/04/03 DOTA
python3.3实现乘法表示例
2014/02/07 Python
python中from module import * 的一个坑
2014/07/20 Python
Python中使用MELIAE分析程序内存占用实例
2015/02/18 Python
简单的Python的curses库使用教程
2015/04/11 Python
python解析html提取数据,并生成word文档实例解析
2018/01/22 Python
python如何将图片转换为字符图片
2020/08/19 Python
对python中数组的del,remove,pop区别详解
2018/11/07 Python
django 单表操作实例详解
2019/07/30 Python
Django CSRF认证的几种解决方案
2020/03/03 Python
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
香港卓悦化妆品官网:BONJOUR
2017/09/21 全球购物
美国Curacao百货连锁店网站:iCuracao.com
2019/07/20 全球购物
护理职业生涯规划书
2014/01/24 职场文书
2014年小班元旦活动方案
2014/02/16 职场文书
北京申奥口号
2014/06/19 职场文书
公司股东合作协议书
2014/09/14 职场文书
文明单位申报材料
2014/12/23 职场文书
Nginx+Windows搭建域名访问环境的操作方法
2022/03/17 Servers
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
2022/08/05 Vue.js