DDR爱好者之家

vue配置文件实现代理v2版本的方法
站长资源 2024/11/25 佚名
58 1538
DDR爱好者之家 Design By 杰米

vue实现不同服务器代理，接上篇，虽然可实现多版本代理，但是每增加一种模式就需要重下新修改vue.config.js以及.env.dev.local，感觉很不智能，扩展性挺差。

主要实现思路：

 模仿vue中.env.local文件，此文件被git忽略，且可根据当前环境变量加载不同的数据，由此在项目根目录下新建development文件夹，在development文件加下建立config文件夹，用户放置配置文件，config下目前暂有两个文件 config.development.local config.owndev.local

在.gitignore中添加

development/config/config.local

development/config/config.*.local

忽略所有的配置local文件，然后通过node读取文件加载配置的json文件，并将代理规则通过代码完善，导出代理规则，最终输出的vue.config.js中实现代理,通过cross-env模块改变系统变量设置，最终实现不同环境下不同文件的加载

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

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

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

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

config下

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

.gitignore 添加对文件的忽略

development/config/config.local
development/config/config.*.local
development/config 下的config.development.dev
{
  "/api":"http://serverurl"
 }
development/config 下的config.owndev.dev

{
  "/api/login":"http://localhost:8080",
  "/api/register":"http://localhost:8081"
}

proxy.js实现主要的代理逻辑，思路如下，根据cross-env设置的环境变量加载不同的json文件

cross-env 用法，在package.json 中devDependencies中添加 ,然后npm i --save-dev cross-env即可

"devDependencies": {
 "cross-env": "^5.2.0"
 }

用法 在启动vue服务前添加 cross-env BUILD_ENV=development 即可

如下

"script":{
  "serve": "cross-env BUILD_ENV=development vue-cli-service serve",
  "owndev": "cross-env BUILD_ENV=owndev vue-cli-service serve",
}

当执行npm run serve 时 process.env.BUILD_ENV 值为development,当执行 npm run owndev时，process.env.BUILD_ENV的值为 owndev

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

var path = require('path'); //系统路径模块
var fs = require('fs'); //文件模块
const defaultProxy = {
 "/api":"http://serverUrl"
};
//根据当前的运行环境判断走哪个配置
const DEVELOPMENT = "development"
let currentEnv = process.env.BUILD_ENV"htmlcode">



let proxy = require('./development/proxy/proxy')
let config = {
 publicPath:"/" ,
 devServer: {
  port: 8080,
  proxy:proxy
 }
}
module.exports = config





以上，完成。使用时只需更改 development/config/config.owndev.local文件即可，即使增加了代理也可只增加配置文件完成代理。


总结


以上所述是小编给大家介绍的vue配置文件实现代理v2版本的方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米