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之HTMLCollection接口代码
Apr 27 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
Jan 20 Javascript
node.js中的emitter.emit方法使用说明
Dec 10 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
Nov 29 Javascript
jquery特效 点击展示与隐藏全文
Dec 09 Javascript
JavaScipt选取文档元素的方法(推荐)
Aug 05 Javascript
提高Web性能的前端优化技巧总结
Feb 27 Javascript
微信小程序 wx.request方法的异步封装实例详解
May 18 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
Oct 10 Javascript
微信小程序实现工作时间段选择
Feb 15 Javascript
js实现弹窗猜数字游戏
Nov 26 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
Dec 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/15 PHP
PHP数组传递是值传递而非引用传递概念纠正
2013/01/31 PHP
简单实现php上传文件功能
2017/09/21 PHP
onsubmit阻止form表单提交与onclick的相关操作
2010/09/03 Javascript
extjs之去除s.gif的影响
2010/12/25 Javascript
jQuery中:button选择器用法实例
2015/01/04 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
2015/01/31 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
2015/08/25 Javascript
smartcrop.js智能图片裁剪库
2015/10/14 Javascript
JS模拟简易滚动条效果代码(附demo源码)
2016/04/05 Javascript
js实现表单及时验证功能 用户信息立即验证
2016/09/13 Javascript
bootstrap datepicker限定可选时间范围实现方法
2016/09/28 Javascript
JavaScript  event对象整理及详细介绍
2016/10/10 Javascript
深入理解Commonjs规范及Node模块实现
2017/05/17 Javascript
深入理解vue2.0路由如何配置问题
2017/07/18 Javascript
vue组件watch属性实例讲解
2017/11/07 Javascript
layer实现弹出层自动调节位置
2019/09/05 Javascript
解决vue scoped html样式无效的问题
2020/10/24 Javascript
python opencv实现运动检测
2018/07/10 Python
Python 解析pymysql模块操作数据库的方法
2020/02/18 Python
巧用CSS3的calc()宽度计算做响应模式布局的方法
2018/03/22 HTML / CSS
阿里云:Aliyun.com
2017/02/15 全球购物
ghd官网:英国ghd直发器品牌
2018/05/04 全球购物
中兴通讯全球官方网站:ZTE
2020/12/26 全球购物
大学生物业管理求职信
2013/10/24 职场文书
大学校园毕业自我鉴定
2014/01/15 职场文书
工地安全检查制度
2014/02/04 职场文书
教师产假请假条
2014/04/10 职场文书
星级党支部申报材料
2014/05/31 职场文书
委托书如何写
2014/08/30 职场文书
2015毕业实习推荐信
2015/03/23 职场文书
给校长的建议书作文500字
2015/09/14 职场文书
python 统计代码耗时的几种方法分享
2021/04/02 Python
mysql脏页是什么
2021/07/26 MySQL
浅谈克隆 JavaScript
2021/11/02 Javascript
mysql下的max_allowed_packet参数设置详解
2022/02/12 MySQL