vue项目使用.env文件配置全局环境变量的方法


Posted in Javascript onOctober 24, 2019

关于文件名:必须以如下方式命名,不要乱起名,也无需专门手动控制加载哪个文件

.env 全局默认配置文件,不论什么环境都会加载合并

.env.development 开发环境下的配置文件

.env.production 生产环境下的配置文件

vue项目使用.env文件配置全局环境变量的方法

关于文件内容:

注意:属性名必须以VUE_APP_开头,比如VUE_APP_XXX

.env:

vue项目使用.env文件配置全局环境变量的方法

.env.development:

vue项目使用.env文件配置全局环境变量的方法

关于文件的加载:

根据启动命令vue会自动加载对应的环境,vue是根据文件名进行加载的,所以上面说“不要乱起名,也无需专门控制加载哪个文件”

比如执行npm run serve命令,会自动加载.env.development文件

启动项目:

vue项目使用.env文件配置全局环境变量的方法

打印process.env属性(全局属性,任何地方均可使用):

vue项目使用.env文件配置全局环境变量的方法

vue项目使用.env文件配置全局环境变量的方法

可见NODE_ENV被改为了development,覆盖掉了.env中的全局属性

.env中的全局属性NODE_ENV、VUE_APP_URL被覆盖,

.env中的全局属性VUE_APP_PREVIEW、VUE_APP_DEFAULT_PARAM被保留

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 定义function的三种方式小结
Oct 16 Javascript
JS阻止用户多次提交示例代码
Mar 26 Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
Sep 06 Javascript
关于Jquery中的事件绑定总结
Oct 26 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
Mar 02 Javascript
vue基于Vue2.0和高德地图的地图组件实例
Apr 28 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
Jul 24 Javascript
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
React项目动态设置title标题的方法示例
Sep 26 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
May 03 Javascript
Vue数字输入框组件使用方法详解
Feb 10 Javascript
AJAX实现省市县三级联动效果
Oct 16 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
Oct 24 #Javascript
nest.js 使用express需要提供多个静态目录的操作方法
Oct 24 #Javascript
Vue 3.0双向绑定原理的实现方法
Oct 23 #Javascript
JavaScript判断数组类型的方法
Oct 23 #Javascript
Vue 2.0双向绑定原理的实现方法
Oct 23 #Javascript
p5.js绘制旋转的正方形
Oct 23 #Javascript
p5.js实现简单货车运动动画
Oct 23 #Javascript
You might like
PHP时间戳使用实例代码
2008/06/07 PHP
5种PHP创建数组的实例代码分享
2014/01/17 PHP
php发送http请求的常用方法分析
2016/11/08 PHP
从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解
2019/04/03 PHP
ES6学习教程之对象字面量详解
2017/10/09 Javascript
详解vuex结合localstorage动态监听storage的变化
2018/05/03 Javascript
js的对象与函数详解
2019/01/21 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
2019/02/01 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
2019/03/01 Javascript
javascript中的with语句学习笔记及用法
2020/02/17 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
2020/03/10 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
2020/08/06 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
2020/09/27 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
2020/11/13 Javascript
javascript实现放大镜功能
2020/12/09 Javascript
[02:40]DOTA2殁境神蚀者 英雄基础教程
2013/11/26 DOTA
[52:44]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第一场 6.3
2018/06/04 DOTA
跟老齐学Python之集合(set)
2014/09/24 Python
在Linux上安装Python的Flask框架和创建第一个app实例的教程
2015/03/30 Python
Python 将RGB图像转换为Pytho灰度图像的实例
2017/11/14 Python
Python快速排序算法实例分析
2017/11/29 Python
PyCharm安装第三方库如Requests的图文教程
2018/05/18 Python
Python3单行定义多个变量或赋值方法
2018/07/12 Python
python 字典修改键(key)的几种方法
2018/08/10 Python
python利用requests库模拟post请求时json的使用教程
2018/12/07 Python
Django框架 querySet功能解析
2019/09/04 Python
CSS3 box-sizing属性
2009/04/17 HTML / CSS
html5 canvas实现跟随鼠标旋转的箭头
2016/03/11 HTML / CSS
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
2019/07/22 HTML / CSS
Harrods美国:英国最大的百货公司
2018/11/04 全球购物
现代化办公人员工作的自我评价
2013/10/16 职场文书
运动会稿件100字
2014/09/24 职场文书
租房协议书范例
2014/10/14 职场文书
一般纳税人申请报告
2015/05/18 职场文书
分享几个JavaScript运算符的使用技巧
2021/04/24 Javascript
Python中三种花式打印的示例详解
2022/03/19 Python