这里给大家分享我在网上总结出来的一些知识 ，希望对大家有所帮助
// proxy.js
const fs = require(fs)
const path = require(path)
const encoding = utf-8
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 + ))() }
const getConfig = () => { try {
return jsonParse(getContent(proxy-config.json))
} catch (e) { return {} } }
module.exports = {
proxy: {
// 接口匹配规则自行修改
/api: {
// 这里必须要有字符串来进行占位
// 如果报错Invaild Url ，将target改成有效的url字符串即可 ，如http://localhost:9001
target: that must have a empty placeholder,
changeOrigin: true,
router: () => (getConfig() || {}).target ||
}
}
}
// proxy-config.json
{ "target": "http://localhost:9001" }
自此 ，当我们需要修改环境地址时 ，只需要修改proxy-config.json文件便能够实时生效 ，不再需要npm run serve！
重点代码分析
实现代码中其实最主要的就是getContent这个方法 ，我们项目在每次发起http请求时都会调用router中的函数 ，而getContent则会通过node的fs服务 ，对我们的环境地址文件进行实时读取 ，从而指向我们最新修改的环境地址 。
方案总结
在按照参考文档配置了项目代码之后 ，我们发现确实能够及时指向新的环境地址 ，再也不需要重启代码 ，不需要长时间的等待了 。但是 ，我们多了两个需要维护的文件 ，每次我们修改环境地址时 ，不仅需要修改config中的api ，还需要修改proxy-config.json中的target！
有没有可能在只需要修改config文件的情况下 ，实现代理地址动态修改呢？
方案优化
从上面的重点代码分析中 ，可以看到只要我们可以在router函数执行时 ，拿到正确的config文件中导出的api属性的值 ，也可以实现同样的效果！
这是不是意味着只要我们在函数中对config文件进行require请求 ，读取api的值 ，再return出去就能及时修改代理指向了呢？
没错 ，你会发现无论你怎么修改 ，函数内require取到的api永远是不变的 ，还是服务刚启动时的环境地址 。
参考源码可以知道 ，这是因为我们在使用require请求文件信息时 ，node会解析出我们传入的字符串的文件路径的绝对路径 ，并且以绝对路径为键值 ，对该文件进行缓存 。
因此 ，如果我们在执行require函数时打断点进行观察的话 ，会发现require上面有一个cache缓存了已经加载过的文件 。
这也恰恰说明了只要我们能够删除掉文件保存在require中的缓存 ，我们就能够拿到最新的文件内容 ，那么我们也可以据此得出我们的最终优化方案 。
// vue.config.js
const hotRequire = modulePath => {
// require.resolve可以通过相对路径获取绝对路径
// 以绝对路径为键值删除require中的对应文件的缓存
delete require.cache[require.resolve(modulePath)]
// 重新获取文件内容
const target = require(modulePath)
return target
}
...
proxy: {
/api: {
// 如果router有效优先取router返回的值
target: that must have a empty placeholder,
changeOrigin: true,
// 每次发起http请求都会执行router函数
router: () => (hotRequire(./src/utils/config) || {}).api || ,
ws: true,
pathRewrite: {
^/api:
}
}
}
自此 ，我们项目修改环境地址将不在需要重启项目 ，也不需要维护额外的文件夹 ，再也不需要痛苦等待了！
本文转载于:
https://juejin.cn/post/7198696282336313400
如果对您有所帮助 ，欢迎您点个关注 ，我会定时更新技术文档 ，大家一起讨论学习 ，一起进步 。
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
