vue动态代理无须重启项目解决方案详解
1.背景
当我们vue构建项目的时候，都会在vue.config.js中配置我们需要代理的服务器地址。有时候我们需要使用不同后端服务器地址，也就是我们开发中所说的测试环境、灰度环境、正式环境等，这个时候如果我们需要使用不同的环境地址的时候，就需要使用命令或者手动修改vue.config.js中配置来重新启动项目。当项目项目越来越大的时候，我们需要很长的时间来启动项目，如此反复，极大影响我们开发进度。这个时候我们急需一种vue动态代理无须重启项目解决方案来提高我们的开发项目，以此为背景，萌生出了以下方案。
2.技术方案
2.1 旧的配置方案
我们在vue.config.js中常用的代理方案如下：
const port = process.env.port || process.env.npm_config_port || 80 // 端口
module.exports = {
lintOnSave: false,
devServer: {
host: '0.0.0.0',
port,
open: false,
proxy: {
'/my-api': {
target: 'https://www.baidu.com',
ws: false,
changeOrigin: true,
}
}
}
}
在启动项目的时候，只会读取一次配置文件，当再次修改target地址时，vue-cli是无法感知文件的变化，所以代理的还是旧的地址，所以我们需要重新启动项目来使配置生效。有没有一种方案，可以在修改配置的时候能使vue-cli感知到文件的变化，从而读取新的配置呢？方案入下：
2.2 新的配置方案思路
vue-cli 的代理是使用的http-proxy-middleware包，所以proxy选项的配置也是基于这个包的配置。在proxy配置选项中有两个属性target以及router。其中target是默认的代理地址。而router可以return一个字符串服务地址，那么当两个选项都配置了时，http-proxy-middleware在解析配置时，会首先使用router函数的返回值，当router的返回值不可以用时，那么就会fallback至target。
http-proxy-middleware router配置源码
配置校验源码
我们可以使用proxy中router来读取我们的代理配置文件，这样就可以实现修改代理配置文件来更新代理地址，无须启动项目。
3. 配置
在vue.config.js中加入如下配置：
// vue.config.js
const dynamicProxy = require('./environments/proxy.js')
const port = process.env.port || process.env.npm_config_port || 80 // 端口
module.exports = {
lintOnSave: false,
devServer: {
host: '0.0.0.0',
port,
open: false,
proxy: dynamicProxy.proxy,
disableHostCheck: true
},
}
新建environments文件夹，同时在里面新建proxy.js文件
// proxy.js
const fs = require('fs')
const path = require('path')
const encoding = 'utf-8'
/**
* 获取配置文件内容 getContent('proxy-config.json')
* @param filename env.json
* @returns {string}
*/
const getContent = filename => {
const dir = path.resolve(process.cwd(), 'environments')
return fs.readFileSync(path.resolve(dir, filename), { encoding })
}
const jsonParse = obj => {
return Function('"use strict";return (' + obj + ')')()
}
/**
* 获取配置选项 getConfig()
* @returns {{}|*}
*/
const getConfig = () => {
try {
return jsonParse(getContent('proxy-config.json'))
} catch (e) {
return {}
}
}
module.exports = {
proxy: {
// 接口匹配规则自行修改
['/my-api']: {
target: 'that must have a empty placeholder', // 这里必须要有字符串来进行占位
changeOrigin: true,
router: () => (getConfig() || {}).target || ''
}
}
}
proxy.js最后导出一个对象，这个对象跟我们以前使用的旧代理方案很像，但是多了一个router配置，router函数返回执行getConfig函数读取配置文件的内容，也就是我们的代理地址。
在environments目录下新建我们的代理配置文件proxy-config.json：
{
"target": "https://www.baidu.com"
}
当项目启动后，会读取我们的代理配置文件。我们在项目启动后，手动修改代理配置文件的代理地址，然后刷新页面，就可以使我们的新代理地址生效。
示例demo
以上就是vue动态代理无须重启项目解决方案详解的详细内容，更多关于vue 动态代理的资料请关注脚本之家其它相关文章！
相关文章
在实际开发中每个开发者应该都有经历过对组件进行二次封装,本文将从三个方面来基于 Element UI 的el-input组件简单实现一下组件的二次封装,有需要的可以参考下2023-09-09
本文主要介绍了Vue引入并使用Element组件库的两种方式小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
这篇文章主要介绍了 解决Vue打包后访问图片/图标不显示的问题，本文给大家介绍的非常详细，具有一定的参考解决价值,需要的朋友可以参考下2019-07-07
详解vue-template-admin三级路由无法缓存的解决方案
这篇文章主要介绍了vue-template-admin三级路由无法缓存的解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
这篇文章主要为大家详细介绍了Vue Validate表单组件的封装的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起了解下2023-09-09
这篇文章主要介绍了vue之监听页面是否以到底部问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要为大家详细介绍了vue实现移动端图片裁剪上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
这篇文章主要介绍了浅谈vue在html中出现{{}}的原因及解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了Vue中引入echarts的步骤及折线图、柱状图常见配置项,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了在antd Table中插入可编辑的单元格实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
最新评论