深入浅析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中常用的SET和GET
Jan 13 Javascript
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
Dec 28 Javascript
JS判断客户端是手机还是PC的2个代码
Apr 12 Javascript
Juery解决tablesorter中文排序和字符范围的方法
May 06 Javascript
属于你的jQuery提示框(Tip)插件
Jan 20 Javascript
实现easyui的datagrid导出为excel的示例代码
Nov 10 Javascript
Bootstrap 3多级下拉菜单实例
Nov 23 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
Dec 11 Javascript
Vue.js组件高级特性实例详解
Dec 24 Javascript
express启用https使用小记
May 21 Javascript
vue使用自定义指令实现拖拽
Jan 29 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
Aug 06 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 在线翻译函数代码
2009/05/07 PHP
PHP 源代码压缩小工具
2009/12/22 PHP
基于PHP实现的事件机制实例分析
2015/06/18 PHP
PHP+MySql+jQuery实现的"顶"和"踩"投票功能
2016/05/21 PHP
php array_slice 取出数组中的一段序列实例
2016/11/04 PHP
PHP 的Opcache加速的使用方法
2017/12/29 PHP
PHP单例模式实例分析【防继承,防克隆操作】
2019/05/22 PHP
真正的JQuery.ajax传递中文参数的解决方法
2011/05/28 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
2012/02/11 Javascript
使用Java实现简单的server/client回显功能的方法介绍
2013/05/03 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
2013/12/18 Javascript
Express作者TJ告别Node.js奔向Go
2014/07/14 Javascript
javascript实现根据时间段显示问候语的方法
2015/06/18 Javascript
简单谈谈node.js 版本控制 nvm和 n
2015/10/15 Javascript
js正则表达式验证邮件地址
2015/11/12 Javascript
JS实现的跨浏览器解析XML文件实例
2016/06/21 Javascript
js原生方法被覆盖,从新赋值原生的方法
2018/01/02 Javascript
对layui初始化列表的CheckBox属性详解
2019/09/13 Javascript
swiper实现异形轮播效果
2019/11/28 Javascript
vue下axios拦截器token刷新机制的实例代码
2020/01/17 Javascript
Python使用py2exe打包程序介绍
2014/11/20 Python
Python从MP3文件获取id3的方法
2015/06/15 Python
pandas数据筛选和csv操作的实现方法
2019/07/02 Python
python 使用装饰器并记录log的示例代码
2019/07/12 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
python怎么调用自己的函数
2020/07/01 Python
Hotels.com爱尔兰:全球酒店预订
2017/02/24 全球购物
adidas泰国官网:adidas TH
2020/07/11 全球购物
求职信范文怎么写
2014/01/29 职场文书
现金出纳岗位职责
2014/03/15 职场文书
幼儿园保育员岗位职责
2014/04/13 职场文书
2014年小学生迎国庆65周年演讲稿
2014/09/27 职场文书
小学生校园广播稿
2014/09/28 职场文书
写给老婆的保证书
2015/02/27 职场文书
python OpenCV学习笔记
2021/03/31 Python
Python游戏开发实例之graphics实现AI五子棋
2021/11/01 Python