深入浅析vue全局环境变量和模式


Posted in Javascript onApril 28, 2020

我们可以在项目根目录中的下列文件来指定环境变量:

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入,但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入,但会被 git 忽略

一个环境文件只包含环境变量的“键=值”对,并且必须以VUE_APP开始:

FOO=bar     //无效
VUE_APP_SECRET=secret  有效

模式

模式是 Vue CLI 项目中一个重要的概念。默认情况下,一个 Vue CLI 项目有三个模式:

  • development 模式用于 vue-cli-service serve
  • production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
  • test 模式用于 vue-cli-service test:unit

了解模式以后,我们可以为对应环境设置相应的环境变量,比如:

  • 为 production 设置 .env.production
  • 为 development 设置 .env.development
  • *为一个特定模式准备的环境文件 (例如 .env.production ) 将会比一般的环境文件 (例如 .env ) 拥有更高的优先级

如果只需要在本地使用的话,可以在后面加入.local,比如 .env.local ,会git 忽略

在客户端侧代码中,可以使用 process.env.VUE_APP_* 获取应用

注:process.env.NODE_ENV,获取应用运行模式( "development" 、 "production" 或 "test" )

process.env.BASE_URL,应用基础路径( vue.config.js 中的 publicPath 选项)

ps:下面看下浅谈vue中环境变量和模式的作用

使用vue框架进行前端开发也有一段时间了,遇到的问题可以大致分为2类:开发问题,部署问题。

开发方面的问题是最多的,也是大家经常会遇到的,但是部署的问题也不容小觑,一旦部署出错会造成严重的上线事故。

开发和测试时调用后台接口的地址是和生产环境中不一样的,有些时候需要跳转到其他网页,也需要测试和生产环境跳转不同的页面。

这些配置如果都用人工来维护,上测试环境注释掉生产的代码,上生产环境注释掉测试的代码,会很麻烦也很容易出错。

所以有必要在一个入口进行控制,这就要用到vue框架中的环境变量和模式。

在vue-cli3构建的项目中,项目根目录下创建.env.[模式]文件可以定义一种模式,在这个文件中定义的变量就是对应模式的环境变量。

在本地启动项目默认是使用的development模式,使用build命令打包默认是使用的production模式。但是我们一般都会有一个测试环境,在我们打测试包和生产包的时候都是用的是production模式,所以需要定义一个环境变量来进行区分。

我目前的做法是创建.env.development,.env.test,.env.production三个模式文件。

每个模式文件中有3个环境变量:NODE_ENV(对应当前模式的名称),VUE_APP_RUNTIME_ENV(对应当前环境的名称),VUE_APP_BASE_URL(当前环境向后台发请求的baseurl)。

vue-cli3构建的项目中默认只有development模式和production模式,默认的NODE_ENV分别是development和production,很多配置也只依据NODE_ENV区分这2种模式,但是我们需要有3种模式。生产和测试的包应该是除了环江变量不同,其他都相同,所以同属production模式。用额外的VUE_APP_RUNTIME_ENV来区分production和test环境。

定义完成之后,在项目中使用process.env.VUE_APP_RUNTIME_ENV即可访问到变量的值。

package.json中也需要定义一条打测试包的命令:

"build-test": "vue-cli-service build --mode test"

表示打一个使用测试配置的身生产包。

到此这篇关于深入浅析vue全局环境变量和模式的文章就介绍到这了,更多相关vue全局环境变量和模式内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript中的其他对象
Jan 16 Javascript
可在线编辑网页文字效果代码(单击)
Mar 02 Javascript
动态添加option及createElement使用示例
Jan 26 Javascript
JS运动基础框架实例分析
Mar 03 Javascript
基于jQuery创建鼠标悬停效果的方法
Mar 07 Javascript
jQuery实现模拟marquee标签效果
Jul 14 Javascript
Angular动态添加、删除输入框并计算值实例代码
Mar 29 Javascript
ES6教程之for循环和Map,Set用法分析
Apr 10 Javascript
JavaScript异步上传图片文件的实例代码
Jul 04 Javascript
详解React之key的使用和实践
Sep 29 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
移动端底部导航固定配合vue-router实现组件切换功能
Jun 13 Javascript
你准备好迎接vue3.0了吗
Apr 28 #Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
Apr 28 #Javascript
JavaScript 禁止用户保存图片的实现代码
Apr 28 #Javascript
JS求解两数之和算法详解
Apr 28 #Javascript
jQuery插件simplePagination的使用方法示例
Apr 28 #jQuery
uni-app如何页面传参数的几种方法总结
Apr 28 #Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
Apr 28 #Javascript
You might like
PHP return语句另类用法不止是在函数中
2014/09/17 PHP
PHP使用适合阅读的格式显示文件大小的方法
2015/03/05 PHP
ThinkPHP进程计数类Process用法实例详解
2015/09/25 PHP
PHP根据key删除数组中指定的元素
2019/02/28 PHP
javascript 匿名函数的理解(透彻版)
2010/01/28 Javascript
javascript qq右下角滑出窗口 sheyMsg
2010/03/21 Javascript
基于jQuery的树控件实现代码(asp.net+json)
2010/07/11 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
2013/08/21 Javascript
jquery模拟LCD 时钟的html文件源代码
2014/06/16 Javascript
jQuery固定元素插件scrolltofixed使用指南
2015/04/21 Javascript
javascript发送短信验证码实现代码
2015/11/12 Javascript
Highcharts+NodeJS搭建数据可视化平台示例
2017/01/01 NodeJs
Easyui笔记2:实现datagrid多行删除的示例代码
2017/01/14 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
2017/01/20 Javascript
微信小程序 bindtap 传参的实例代码
2020/02/21 Javascript
[01:14:19]NAVI vs Mineski 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
Python 文件操作的详解及实例
2017/09/18 Python
Python实现冒泡排序的简单应用示例
2017/12/11 Python
浅析python 动态库m.so.1.0错误问题
2020/05/09 Python
详解Canvas事件绑定
2018/06/27 HTML / CSS
ProBikeKit澳大利亚:自行车套件,跑步和铁人三项装备
2016/11/30 全球购物
Coach澳大利亚官方网站:美国著名时尚奢侈品牌
2017/05/24 全球购物
*p++ 自增p 还是p所指向的变量
2016/07/16 面试题
开放系统互连参考模型
2016/06/29 面试题
UDP协议功能
2013/01/06 面试题
长青弘远的面试题
2012/06/09 面试题
通息工程毕业生自荐信
2013/10/16 职场文书
大学毕业感言100字
2014/02/03 职场文书
蜜蜂引路教学反思
2014/02/04 职场文书
业务员自荐信范文
2014/04/20 职场文书
信访工作个人总结
2015/03/03 职场文书
装配车间主任岗位职责
2015/04/08 职场文书
在酒桌上的敬酒词
2015/08/12 职场文书
财务年终工作总结大全
2019/06/20 职场文书
Node与Python 双向通信的实现代码
2021/07/16 Javascript
最新最全的手机号验证正则表达式
2022/02/24 Javascript