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 相关文章推荐
JavaScript性能陷阱小结(附实例说明)
Dec 28 Javascript
妙用Jquery的val()方法
Jun 27 Javascript
移动节点的jquery代码
Jan 13 Javascript
JavaScript事件委托用法分析
Jan 24 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
Jun 05 Javascript
详解JavaScript中的blink()方法的使用
Jun 08 Javascript
Javascript类型系统之String字符串类型详解
Jun 21 Javascript
javascript数字验证的实例代码(推荐)
Aug 20 Javascript
jQuery获取选中单选按钮radio的值
Dec 27 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
webpack+vue中使用别名路径引用静态图片地址
Nov 20 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
Jul 25 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函数常用用法小结
2010/02/08 PHP
PHP sprintf() 函数的应用(定义和用法)
2012/06/29 PHP
php根据日期或时间戳获取星座信息和生肖等信息
2015/10/20 PHP
javascript实现的动态文字变换
2007/07/28 Javascript
判断脚本加载是否完成的方法
2009/05/26 Javascript
用JS判断IE版本的代码 超管用!
2011/08/09 Javascript
js精度溢出解决方案
2012/12/02 Javascript
javascript操作html控件实例(javascript添加html)
2013/12/02 Javascript
Node.js重新刷新session过期时间的方法
2016/02/04 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
2016/04/15 Javascript
基于jquery插件编写countdown计时器
2016/06/12 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
2016/08/19 Javascript
React Native如何消除启动时白屏的方法
2017/08/08 Javascript
JavaScript模块详解
2017/12/18 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
2018/08/31 Javascript
Angular6 正则表达式允许输入部分中文字符
2018/09/10 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
2019/02/02 Javascript
如何实现小程序tab栏下划线动画效果
2019/05/18 Javascript
vue+django实现一对一聊天功能的实例代码
2019/07/17 Javascript
实现vuex与组件data之间的数据同步更新方式
2019/11/12 Javascript
JavaScript中的类型检查
2020/02/03 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
2020/03/07 Javascript
js实现贪吃蛇游戏(简易版)
2020/09/29 Javascript
[01:45]绝对公平!DOTA2队长征召模式详解
2014/04/25 DOTA
Python安装图文教程 Pycharm安装教程
2018/03/27 Python
PyQT实现菜单中的复制,全选和清空的功能的方法
2019/06/17 Python
移动端rem布局的两种实现方法
2018/01/03 HTML / CSS
新加坡领先的在线生活方式和杂货购物网站:EAMART
2019/04/02 全球购物
市场营销专业自荐书
2014/06/10 职场文书
护理专业毕业生自荐信
2014/06/15 职场文书
感情真挚的毕业生求职信
2014/07/19 职场文书
教师个人成长总结
2015/02/11 职场文书
个人思想政治总结
2015/03/05 职场文书
集团财务总监岗位职责
2015/04/03 职场文书
党员电教片《信仰》心得体会
2016/01/15 职场文书
低门槛开发iOS、Android、小程序应用的前端框架详解
2021/10/16 Javascript