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阻止事件冒泡具体实现
Oct 11 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
Dec 17 Javascript
jquery ajax跨域解决方法(json方式)
Feb 04 Javascript
js中实现字符串和数组的相互转化详解
Jan 24 Javascript
BootStrap和jQuery相结合实现可编辑表格
Apr 21 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
Jul 04 Javascript
javascript判断回文数详解及实现代码
Feb 03 Javascript
详解vue嵌套路由-query传递参数
May 23 Javascript
微信小程序之发送短信倒计时功能
Aug 30 Javascript
一个Vue页面的内存泄露分析详解
Jun 25 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
Feb 21 Javascript
js实现头像上传并且可预览提交
Dec 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中数组定义的几种方法
2013/09/01 PHP
mac下Apache + MySql + PHP搭建网站开发环境
2014/06/02 PHP
PHP调用.NET的WebService 简单实例
2015/03/27 PHP
PHP 错误处理机制
2015/07/06 PHP
PHP的Yii框架中创建视图和渲染视图的方法详解
2016/03/29 PHP
动态创建的表格单元格中的事件实现代码
2008/12/30 Javascript
javascript之querySelector和querySelectorAll使用说明
2011/10/09 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
2014/05/07 Javascript
jQuery实现的输入框选择时间插件用法实例
2015/02/28 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
2015/12/20 Javascript
JS仿hao123导航页面图片轮播效果
2016/09/01 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
2016/12/21 Javascript
React组件的三种写法总结
2017/01/12 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
2017/07/28 Javascript
简单谈谈js的数据类型
2017/09/25 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
2019/09/06 Javascript
[02:29]DOTA2英雄基础教程 陈
2013/12/17 DOTA
Python的subprocess模块总结
2014/11/07 Python
Python实现设置windows桌面壁纸代码分享
2015/03/28 Python
基于python中的TCP及UDP(详解)
2017/11/06 Python
详解python播放音频的三种方法
2019/09/23 Python
基于django micro搭建网站实现加水印功能
2020/05/22 Python
使用Python封装excel操作指南
2021/01/29 Python
canvas需要在标签里直接定义宽高
2014/12/17 HTML / CSS
数以千计的折扣工业产品:ESE Direct
2018/05/20 全球购物
漫威玩具服装及周边商品官方购物网站:Marvel Shop
2019/05/11 全球购物
SCHIESSER荷兰官方网站:德国内衣专家
2020/10/09 全球购物
ktv中秋节活动方案
2014/01/30 职场文书
大学生会计职业生涯规划范文
2014/02/28 职场文书
物理系毕业生自荐书
2014/06/13 职场文书
四风剖析查摆对照检查材料思想汇报
2014/09/24 职场文书
2016新年慰问信范文
2015/03/25 职场文书
2015年幼儿园学期工作总结
2015/05/22 职场文书
导游词之北京明十三陵
2019/10/28 职场文书
mysql 体系结构和存储引擎介绍
2022/05/06 MySQL