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 09 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
Oct 17 Javascript
JS替换字符串中空格方法
Apr 17 Javascript
Vue.js鼠标悬浮更换图片功能
May 17 Javascript
详解vue前后台数据交互vue-resource文档
Jul 19 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
不得不知的ES6小技巧
Jul 28 Javascript
浅谈vue项目打包优化策略
Sep 29 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
Dec 12 Javascript
OpenLayers实现图层切换控件
Sep 25 Javascript
antd配置config-overrides.js文件的操作
Oct 31 Javascript
uniapp开发打包多端应用完整方法指南
Dec 24 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
推荐几部必看的DC动画电影
2020/03/03 欧美动漫
星际争霸任务指南——神族
2020/03/04 星际争霸
thinkPHP5.1框架使用SemanticUI实现分页功能示例
2019/08/03 PHP
javascript 词法作用域和闭包分析说明
2010/08/12 Javascript
轻松创建nodejs服务器(10):处理POST请求
2014/12/18 NodeJs
走进javascript——不起眼的基础,值和分号
2017/02/24 Javascript
深入理解vue $refs的基本用法
2017/07/13 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
2018/03/09 Javascript
angular5 子组件监听父组件传入值的变化方法
2018/09/30 Javascript
前端天气插件tpwidget使用方法详解
2019/06/24 Javascript
详解基于 Node.js 的轻量级云函数功能实现
2019/07/08 Javascript
[46:00]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第一局
2016/03/03 DOTA
人生苦短我用python python如何快速入门?
2018/03/12 Python
python ddt实现数据驱动
2018/03/14 Python
python flask web服务实现更换默认端口和IP的方法
2019/07/26 Python
python求numpy中array按列非零元素的平均值案例
2020/06/08 Python
实现Python3数组旋转的3种算法实例
2020/09/16 Python
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
2013/11/18 HTML / CSS
CSS3动画和HTML5新特性详解
2020/08/31 HTML / CSS
意大利奢侈品网站:Italist
2016/08/23 全球购物
The Hut德国站点:时装、家居用品、美容等
2016/09/23 全球购物
德购商城:德国进口直邮商城
2017/06/13 全球购物
3个CCIE对一个工程师的面试题
2012/05/06 面试题
2014全国两会学习心得体会1000字
2014/03/10 职场文书
升学宴主持词
2014/04/02 职场文书
铁路安全事故反思
2014/04/26 职场文书
小小商店教学反思
2014/04/27 职场文书
2015元旦主持词开场白和结束语
2014/12/14 职场文书
2015年119消防宣传日活动总结
2015/03/24 职场文书
行政处罚听证告知书
2015/07/01 职场文书
新员工入职感言范文!
2019/07/04 职场文书
创业计划书之美甲店
2019/09/20 职场文书
某某幼儿园的教育教学管理调研分析报告
2019/11/29 职场文书
Mybatis-plus在项目中的简单应用
2021/07/01 Java/Android
关于maven依赖 ${xxx.version}报错问题
2022/01/18 Java/Android
Windows Server 2008 修改远程登录端口以及配置防火墙
2022/04/28 Servers