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


Posted in Javascript onJune 21, 2019

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?process.env.BUILD_ENV:DEVELOPMENT
let configPath = `config/config.${currentEnv}.local`
let filePath = path.join(__dirname, configPath); //文件路径,__dirname为当前运行js文件的目录
let proxyContent = null;
//读取json文件,异步
/*fs.readFile(filePath, 'utf-8', function(err, data) {
 if (!err) {
  proxyContent = data;
 } 
});*/
//将json字符串转化为json对象
try{
proxyContent = JSON.parse(fs.readFileSync(filePath,'utf-8'))
}catch(e){
proxyContent = defaultProxy
}
if(proxyContent == null){
 proxyContent = defaultProxy
}
let proxys = {}
//遍历所有的配置代理,对应不同的服务器
Object.getOwnPropertyNames(proxyContent).forEach(function (key) {
 let targetPath = proxyContent[key]
 let proxyItem = {};
 proxyItem.target = targetPath;
 proxyItem.ws = true;
 proxyItem.changeOrigin = true;
 proxyItem.pathRewrite = {}
 proxyItem.pathRewrite[`^${key}`] = '/'
 proxys[key] = proxyItem
});
module.exports = proxys

在vue.config.js中引用该文件

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

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

总结

以上所述是小编给大家介绍的vue配置文件实现代理v2版本的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
Prototype使用指南之hash.js
Jan 10 Javascript
IE和Mozilla的兼容性汇总event
Aug 12 Javascript
form表单只提交数据而不进行页面跳转的解决方案
Sep 18 Javascript
select多选 multiple的使用示例
Jun 16 Javascript
浅谈javascript中this在事件中的应用
Feb 15 Javascript
jquery判断至少有一个checkbox被选中的方法
Jun 05 Javascript
浅谈JavaScript的内置对象和浏览器对象
Jun 03 Javascript
详解js中==与===的区别
Jan 08 Javascript
微信小程序使用request网络请求操作实例
Dec 15 Javascript
Vue中"This dependency was not found"问题的解决方法
Jun 19 Javascript
vue组件表单数据回显验证及提交的实例代码
Aug 30 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
Jul 04 Javascript
微信小程序自定义多列选择器使用详解
Jun 21 #Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
Jun 21 #Javascript
Vue多环境代理配置方法思路详解
Jun 21 #Javascript
微信小程序实现卡片层叠滑动效果
Jun 21 #Javascript
使用express来代理服务的方法
Jun 21 #Javascript
react+redux仿微信聊天界面
Jun 21 #Javascript
基于jQuery的时间戳与日期间的转化
Jun 21 #jQuery
You might like
在PHP中利用XML技术构造远程服务(下)
2006/10/09 PHP
PHP4.04简明安装
2006/10/09 PHP
php实现保存周期为1天的购物车类
2017/07/07 PHP
laravel 实现上传图片到本地和前台访问示例
2019/10/21 PHP
javascript显示隐藏层比较不错的方法分析
2008/09/30 Javascript
用JavaScript隐藏控件的方法
2009/09/21 Javascript
javascript实现设置、获取和删除Cookie的方法
2015/06/01 Javascript
分享纯手写漂亮的表单验证
2015/11/19 Javascript
微信小程序  action-sheet详解及实例代码
2016/11/09 Javascript
基于jQuery实现咖啡订单管理简单应用
2017/02/10 Javascript
100行代码理解和分析vue2.0响应式架构
2017/03/09 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
2017/12/04 Javascript
js实现点击按钮复制文本功能
2020/07/20 Javascript
纯JS实现可用于页码更换的飞页特效示例
2018/05/21 Javascript
vue实现form表单与table表格的数据关联功能示例
2019/01/29 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
2019/04/28 Javascript
关于vue路由缓存清除在main.js中的设置
2019/11/06 Javascript
基于Vue+Webpack拆分路由文件实现管理
2020/11/16 Javascript
python dict 字典 以及 赋值 引用的一些实例(详解)
2017/01/20 Python
python递归打印某个目录的内容(实例讲解)
2017/08/30 Python
利用Tkinter和matplotlib两种方式画饼状图的实例
2017/11/06 Python
Python时间戳使用和相互转换详解
2017/12/11 Python
Python 实现黑客帝国中的字符雨的示例代码
2020/02/20 Python
Python 判断时间是否在时间区间内的实例
2020/05/16 Python
Python如何将装饰器定义为类
2020/07/30 Python
一篇文章教你用python画动态爱心表白
2020/11/22 Python
香港彩色隐形眼镜在线商店:Stunninglens(全球免费送货)
2019/05/10 全球购物
介绍一下SOA和SOA的基本特征
2016/02/24 面试题
社会发展项目建议书
2014/08/25 职场文书
基层党员群众路线整改措施及努力方向
2014/10/28 职场文书
工作能力自我评价2015
2015/03/05 职场文书
学籍证明模板
2015/06/18 职场文书
2015年中学体育教师工作总结
2015/10/23 职场文书
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技
《英雄联盟》2022日蚀、月蚀皮肤演示 黑潮亚索曝光
2022/04/13 其他游戏
安装harbor作为docker镜像仓库的问题
2022/06/14 Servers