详解vue配置文件实现代理v2版本的方法
- 更新时间:2020-03-09 12:51:25
- 编辑:胡雅逸
参考资料
- 《Vue.js 前端开发 快速入门与专业应用》配套彩图,源码 配套资源 / 4.2 MB / 陈陆扬 推荐度:
- Node.js实战:使用Egg.js+Vue.js+Docker构建渐进式、可持续集成与交付应用 PDF 电子书 / 227 MB / yugo 推荐度:
- JavaScript+Vue+React全程实例 PDF 电子书 / 59150 MB M / 郑均辉,薛燚 推荐度:
- Spring Boot+Vue全栈开发实战 PDF 电子书 / 196.3 MB / 王松 推荐度:
- 《Node.js+Express+Vue.js项目开发实战》源码 配套资源 / 3.6 MB / 张旭 推荐度:
正文内容
vue配置文件实现代理v2版本的方法
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模块改变系统变量设置,最终实现不同环境下不同文件的加载
现新建项目,目录结构如下:
其中development为新添加目录,其中主要放置需要代理的文件
config下
.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版本的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
vue相关教程
-
Vue组件插槽的使用以及调用组件内的方法分析
在本篇文章里我们给大家分享了Vue组件插槽的使用以及调用组件内的方法相关知识点,有需要的朋友们参考下。
发布时间:2021-05-18
-
vue-cli脚手架config目录下index.js配置文件的方法
下面小编就为大家分享一篇vue-cli脚手架config目录下index.js配置文件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
发布时间:2019-07-23
-
Vue.js快速入门
目前单页应用框架层出不穷,其中Vue.js是十分耀眼的项目之一,受到国内外开发人员的极度推崇。 全书分为8章,内容包括Vue.js概述、Vue.js的安装、定义页面、渲染视图、路由、发送HTTP请求、表单的绑定和提交、打包、部署、解决js的跨域问题、Debug、Component、Mixin、Vuex、页面的生命周期等,最后还给出一个实战案例供读者了解Vue.js项目开发过程。 本书适合Vue.js初学者、Web前端开发人员,也适合高等院校和培训学校的师生教学参考。
大小:26581 MB MVue.js入门
-
Vue企业开发实战
本书以Vue.js 2为基础,以项目实战的方式引导读者渐进式学习Vue.js框架。本书分为项目起步、Vue.js介绍、项目插件、项目梳理等部分。
大小:109.6 MBVue.js实战电子书
-
Spring Boot+Vue全栈开发实战
传统的JavaEE开发效率低下、配置臃肿、调试不便,严重制约了程序员的生产力。Spring Boot致力于简化开发配置,并为企业级开发提供一系列非业务性功能;而Vue则采用数据驱动视图的方式将程序
大小:196.3 MBSpring电子书
-
水晶石技法VUE 10完全学习手册
《水晶石技法 VUE 10完全学习手册》共14章,以实例为主,共提供了50多个制作实例。第1~3章对VUE进行了总体介绍。第4~12章通过大量的实例,分别介绍了VUE的各个功能模块,包括大气、材质、地形、生态系统、函数、动画、渲染,以及VUE和其他软件的结合使用(比如,3ds Max、Poser等)。第13章安排了两个综合实例,让读者在较为全面地了解了VUE的功能之后,综合使用各个知识点来完成更为大型的实例。在本书最后的第14章中,列出了VUE使用过程中的一些常见
大小:114191 MB VUE10学习手册
-
Vue.js前端开发:快速入门与专业应用
本书分为10章,包括简介、基础特性、指令、过滤器、过渡、组件、状态管理、常用插件、工程实例和Weex打包。本书从简单的单个实例和基础语法,到工程实例,将系统地讲述Vue.js在项目中的
大小:3.6KB MB前端开发电子书
-
JavaScript+Vue+React全程实例
这书根据基础知识与开发实践活动紧密结合的观念,选萃当今简易、好用和时兴的百余个JavaScript编码案例,协助阅读者学习培训把握JavaScript开发语言。本书內容详实、重中之重突显、浅显易懂,包含了JavaScript前端开发开发的各个方面。
大小:59150 MB MJS实例
-
Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统
本书从项目实践出发,手把手、心贴心地带领读者从零开始,一步一步地开发出功能相对完整的权限管理系统,从而深入掌握当前主流的Spring Boot + Spring Cloud + Vue前后端集成开发技术。 全书分为三篇共32章。第一篇为系统介绍篇,对系统的功能、架构和界面进行介绍,对系统的安装运行给出指南,对涉及的关键技术进行简单介绍。第二篇为后端实现篇,从数据库设计和搭建开发环境开始,全面细致地讲解权限管理系统的后端实现全过程。第三篇为前端实现
大小:132979 MB 项目实战
-
Vue.js项目实战
Vue实用、灵便、更快,为搭建详细的当代Web运用出示了需要的全部作用,其渐进式的特性也让开发人员可以轻轻松松入门,发布后快速获得了前端工程师工作人员的亲睐。这书由Vue.js关键精英
大小:141 MBVue
-
Vue.js快速入门
目前单页应用框架层出不穷,其中Vue.js是十分耀眼的项目之一,受到国内外开发人员的极度推崇。
大小:186.6 MBWeb前端电子书