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 相关文章推荐
jQuery 连续列表实现代码
Dec 21 Javascript
javascript 当前日期转化为中文的实现代码
May 13 Javascript
jquery学习笔记 用jquery实现无刷新登录
Aug 08 Javascript
jquery中.add()的使用分析
Apr 26 Javascript
Jquery 动态循环输出表格具体方法
Nov 23 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
Jan 02 Javascript
JavaScript淡入淡出渐变简单实例
Aug 06 Javascript
JavaScript贪吃蛇小组件实例代码
Aug 20 Javascript
详解JavaScript中typeof与instanceof用法
Oct 24 Javascript
vue页面切换项目实现转场动画的方法
Nov 12 Javascript
微信小程序自定义导航栏(模板化)
Nov 15 Javascript
JS事件循环机制event loop宏任务微任务原理解析
Aug 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中的file_get_contents获取远程页面乱码的问题
2013/06/25 PHP
laravel配置Redis多个库的实现方法
2019/04/10 PHP
图片之间的切换
2006/06/26 Javascript
javascript使用onclick事件改变选中行的颜色
2013/12/30 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
2014/08/12 Javascript
Windows系统下使用Sublime搭建nodejs环境
2015/04/13 NodeJs
jQuery动画效果相关方法实例分析
2015/12/31 Javascript
Javascript打印局部页面实例
2016/06/21 Javascript
jQuery回到顶部的代码
2016/07/09 Javascript
JavaScript简单下拉菜单特效
2016/09/13 Javascript
使用nodejs下载风景壁纸
2017/02/05 NodeJs
Vue.js展示AJAX数据简单示例讲解
2017/03/29 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
2017/07/10 Javascript
详解express与koa中间件模式对比
2017/08/07 Javascript
JS二级菜单不同实现方法分析【4种方法】
2018/12/21 Javascript
更强大的vue ssr实现预取数据的方式
2019/07/19 Javascript
微信小程序3种位置API的使用方法详解
2019/08/05 Javascript
vue在响应头response中获取自定义headers操作
2020/07/24 Javascript
[03:17]DOTA2英雄基础教程 剧毒术士
2013/12/12 DOTA
python中os和sys模块的区别与常用方法总结
2017/11/14 Python
Python编程之gui程序实现简单文件浏览器代码
2017/12/08 Python
使用Anaconda3建立虚拟独立的python2.7环境方法
2018/06/11 Python
python实现三次样条插值
2018/12/17 Python
Python搭建Spark分布式集群环境
2019/07/05 Python
python找出因数与质因数的方法
2019/07/25 Python
在Django中实现添加user到group并查看
2019/11/18 Python
python自动化unittest yaml使用过程解析
2020/02/03 Python
Jupyter 无法下载文件夹如何实现曲线救国
2020/04/22 Python
利用python对mysql表做全局模糊搜索并分页实例
2020/07/12 Python
阿玛尼意大利官网:Armani意大利
2018/10/30 全球购物
委托与事件是什么关系?为什么要使用委托
2014/04/18 面试题
内部类的定义、种类以及优点
2013/10/16 面试题
幼儿园教师节活动方案
2014/02/02 职场文书
行政介绍信范文
2015/05/04 职场文书
分享几个JavaScript运算符的使用技巧
2021/04/24 Javascript
Redis读写分离搭建的完整步骤
2021/09/14 Redis