深入浅析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 相关文章推荐
Jquery 弹出层插件实现代码
Oct 24 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
Jan 29 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
Dec 16 Javascript
JavaScript中实现单体模式分享
Jan 29 Javascript
jquery实现表格本地排序的方法
Mar 11 Javascript
JavaScript中数组slice和splice的对比小结
Sep 22 Javascript
JavaScript实现二分查找实例代码
Feb 22 Javascript
详解Vue快速零配置的打包工具——parcel
Jan 16 Javascript
使用Vue实现图片上传的三种方式
Jul 17 Javascript
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
Dec 29 Javascript
Nest.js散列与加密实例详解
Feb 24 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
如何使用微信公众平台开发模式实现多客服
2016/01/06 PHP
[原创]php常用字符串输出方法分析(echo,print,printf及sprintf)
2016/07/09 PHP
Laravel框架查询构造器 CURD操作示例
2019/09/04 PHP
php实现映射操作实例详解
2019/10/02 PHP
JS 参数传递的实际应用代码分析
2009/09/13 Javascript
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
2010/03/04 Javascript
在JavaScript中监听IME键盘输入事件
2011/05/29 Javascript
JavaScript中变量提升 Hoisting
2012/07/03 Javascript
JS实现遮罩层效果的简单实例
2013/11/12 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
2013/12/13 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
2014/10/31 Javascript
javascript三元运算符用法实例
2015/04/16 Javascript
简单的分页代码js实现
2016/05/17 Javascript
jQuery基本选择器之标签名选择器
2016/09/03 Javascript
基于angularJS的表单验证指令介绍
2016/10/21 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
2018/11/20 jQuery
使用 Element UI Table 的 slot-scope方法
2019/10/10 Javascript
微信小程序实现时间戳格式转换
2020/07/20 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
2020/11/24 Javascript
[59:42]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python排序搜索基本算法之插入排序实例分析
2017/12/11 Python
利用python库在局域网内传输文件的方法
2018/06/04 Python
实例详解python函数的对象、函数嵌套、名称空间和作用域
2019/05/31 Python
python中列表的含义及用法
2020/05/26 Python
Keras自定义IOU方式
2020/06/10 Python
利用CSS3的checked伪类实现OL的隐藏显示的方法
2010/12/18 HTML / CSS
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
银行存款证明样本
2014/01/17 职场文书
求职简历的自我评价
2014/01/31 职场文书
2014五一国际劳动节活动总结范文
2014/04/14 职场文书
学习之星事迹材料
2014/05/17 职场文书
学校通报表扬范文
2015/05/04 职场文书
师范生见习自我总结
2015/06/23 职场文书
PHP中->和=>的意思
2021/03/31 PHP
tensorflow学习笔记之tfrecord文件的生成与读取
2021/03/31 Python
解决python3安装pandas出错的问题
2021/05/20 Python