vue配置文件实现代理v2版本的方法

某视频剪辑软件实现不同服务器代理，接上篇，虽然可实现多版本代理，但是每增加一种模式就需要重下新修改vue.config.js以及。环境发展局感觉很不智能，扩展性挺差。

主要实现思路：

模仿某视频剪辑软件中环境本地文件，此文件被饭桶忽略，且可根据当前环境变量加载不同的数据，由此在项目根目录下新建发展文件夹，在发展文件加下建立配置文件夹，用户放置配置文件，配置下目前暂有两个文件配置。发展。本地配置。拥有dev。当地的

在。被增加中添加

开发/配置/配置。本地

开发/配置/配置。*.当地的

忽略所有的配置当地的文件，然后通过结节读取文件加载配置的数据文件，并将代理规则通过代码完善，导出代理规则，最终输出的vue.config.js中实现代理，通过交叉环境模块改变系统变量设置，最终实现不同环境下不同文件的加载

现新建项目，目录结构如下：

其中发展为新添加目录，其中主要放置需要代理的文件

配置下

。被增加添加对文件的忽略

开发/配置/配置。本地开发/配置/配置.*.本地开发/配置下的配置。发展。dev { '/API ' : ' http://服务器URL ' }开发/配置下的配置。拥有dev。dev { '/API/log in ' : ' http://localhost :8080 '，'/API/register ' : ' http://localhost :8081 ' }代理。射流研究…实现主要的代理逻辑，思路如下，根据交叉环境设置的环境变量加载不同的数据文件

交叉环境用法，在package.json中开发依赖关系中添加，然后npm i -保存-开发跨环境即可

开发依赖项' : { '交叉环境' : '^5.2.0' }用法在启动某视频剪辑软件服务前添加跨环境BUILD _ ENV=发展即可

如下

脚本： { ' serve ' : ' cross-ENV BUILD _ ENV=development vue-CLI-service serve '，' own dev ' : ' cross-ENV BUILD _ ENV=own dev vue-CLI-service '，}当执行新公共管理运行服务时process.env.BUILD_ENV值为发展，当执行新公共管理运行owndev时，process.env.BUILD_ENV的值为owndev

proxy.js实现的主逻辑如下：

var path=require(' path ')；//系统路径模块var fs=require(' fs ')；//文件模块const DefaultProxy={ "/API " : " http://ServerURL " }；//根据当前的运行环境判断走哪个配置const DEVELOpMENT=' DEVELOpMENT '让当前ev=process。ENV。BUILD _ ENV？过程。环境。让配置路径=` config/config .$ { CurrentEv }。本地` let文件路径=路径。join(_ dirname，配置路径)；//文件路径，__dirname为当前运行射流研究…文件的目录让proxyContent=null//读取数据文件，异步/*fs.readFile(文件路径，' utf-8 '，函数(err，data) { if(！err){ proxyContent=data；} });*///将数据字符串转化为数据对象尝试{ proxyContent=JSON。解析(fs。readfilesync(文件路径，“utf-8”)} catch(e){ proxyContent=defaultProxy } if(proxyContent==null){ proxyContent=defaultProxy }让proxy={ }//遍历所有的配置代理，对应不同的服务器对象。GetOwnPropertyNames(代理内容).forEach(function(key){ let target path=proxyContent[key]let proxyItem={ }；proxy item . target=targetpath proxy item . ws=true proxy item。改变原点=真；代理项目。路径重写={ } proxyitem.pathrewrite[`^${key}`]=“/”代理[密钥]=代理项})；module.exports=proxys在vue.config.js中引用该文件

让proxy=require(' ./开发/代理/代理)让config={ publicPath:'/'，devServer: { port: 8080，proxy:proxy } }模块。导出=配置以上，完成。使用时只需更改开发/配置/配置。拥有dev。当地的文件即可，即使增加了代理也可只增加配置文件完成代理。

总结

以上就是用边肖介绍的vue配置文件实现agent v2版本的方法。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！