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 相关文章推荐
EditPlus注册码生成器(js代码实现)
Mar 25 Javascript
JavaScript中5种调用函数的方法
Mar 12 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
Aug 21 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
Dec 14 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
Aug 29 Javascript
easyui导出excel无法弹出下载框的快速解决方法
Nov 10 Javascript
Bootstrap风格的zTree右键菜单
Feb 17 Javascript
bootstrap警告框示例代码分享
May 17 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
Sep 10 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
May 23 Javascript
React实现动效弹窗组件
Jun 21 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为什么选mysql作为数据库? Mysql 创建用户方法
2007/07/02 PHP
PHP 防注入函数(格式化数据)
2011/08/08 PHP
又十个超级有用的PHP代码片段
2015/09/24 PHP
PHP手机短信验证码实现流程详解
2018/05/17 PHP
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
2011/03/30 Javascript
解决jquery的datepicker的本地化以及Today问题
2012/05/23 Javascript
JavaScript定义类的几种方式总结
2014/01/06 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
2014/03/20 Javascript
javascript的创建多行字符串的7种方法
2014/04/29 Javascript
JS 实现列表与多选框选择附预览动画
2014/10/29 Javascript
简易的投票系统以及js刷票思路和方法
2015/04/07 Javascript
js实现的Easy Tabs选项卡用法实例
2015/09/06 Javascript
jQuery循环遍历子节点并获取值的方法
2016/04/14 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
2017/03/31 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
2017/06/16 Javascript
Angular2 父子组件数据通信实例
2017/06/22 Javascript
vue mixins组件复用的几种方式(小结)
2017/09/06 Javascript
JS中的算法与数据结构之集合(Set)实例详解
2019/08/20 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
2019/09/25 Javascript
Python程序设计入门(5)类的使用简介
2014/06/16 Python
python中使用enumerate函数遍历元素实例
2014/06/16 Python
Python中用于返回绝对值的abs()方法
2015/05/14 Python
python中numpy的矩阵、多维数组的用法
2018/02/05 Python
Python多重继承的方法解析执行顺序实例分析
2018/05/26 Python
python 实现得到当前时间偏移day天后的日期方法
2018/12/31 Python
CSS3 边框效果
2019/11/04 HTML / CSS
德国运动营养和健身网上商店:Myprotein.de
2018/07/18 全球购物
乐高奥地利官方商店:LEGO Shop AT
2019/07/16 全球购物
Python是如何进行类型转换的
2013/06/09 面试题
高一地理教学反思
2014/01/18 职场文书
2014第二批党员干部对照“四风”找差距检查材料思想汇报
2014/09/18 职场文书
2014年话务员工作总结
2014/11/19 职场文书
2014幼儿教师个人工作总结
2014/12/03 职场文书
师范生教育见习总结
2015/06/23 职场文书
小学班级管理心得体会
2016/01/07 职场文书
800字作文之大雪
2019/12/04 职场文书