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 相关文章推荐
jQuery中文入门指南,翻译加实例,jQuery的起点教程
Jan 13 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
May 07 Javascript
鼠标滑上去后图片放大浮出效果的js代码
May 28 Javascript
jquery按回车提交数据的代码示例
Nov 05 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
Feb 12 Javascript
js获取及判断键盘按键的方法
Dec 01 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
Apr 01 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
May 26 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
Oct 01 Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
Dec 09 Javascript
浅谈Angular7 项目开发总结
Dec 19 Javascript
vue项目中全局引入1个.scss文件的问题解决
Aug 01 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
ADODB类使用
2006/11/25 PHP
基于session_unset与session_destroy的区别详解
2013/06/03 PHP
深入PHP购物车模块功能分析(函数讲解,附源码)
2013/06/25 PHP
PHP入门教程之面向对象基本概念实例分析
2016/09/11 PHP
PHP开发之用微信远程遥控服务器
2018/01/25 PHP
JavaScript中使用构造函数实现继承的代码
2010/08/12 Javascript
细说浏览器特性检测(2)-通用事件检测
2010/11/05 Javascript
jQuery1.6 类型判断实现代码
2011/09/01 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
2013/11/26 Javascript
纯JS实现旋转图片3D展示效果
2015/04/12 Javascript
JS数组排序方法实例分析
2016/12/16 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
2017/02/18 Javascript
微信小程序实现下拉刷新和轮播图效果
2017/11/21 Javascript
JS实现继承的几种常用方式示例
2019/06/22 Javascript
JavaScript indexOf()原理及使用方法详解
2020/07/09 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
2020/08/11 Javascript
JS数据类型分类及常用判断方法
2020/11/19 Javascript
ES6中的类(Class)示例详解
2020/12/09 Javascript
[01:02]DOTA2辉夜杯决赛日 CDEC.Y对阵VG赛前花絮
2015/12/27 DOTA
详解Python的Twisted框架中reactor事件管理器的用法
2016/05/25 Python
总结python爬虫抓站的实用技巧
2016/08/09 Python
flask中使用蓝图将路由分开写在不同文件实例解析
2018/01/19 Python
python smtplib模块实现发送邮件带附件sendmail
2018/05/22 Python
利用Pycharm断点调试Python程序的方法
2018/11/29 Python
用Pelican搭建一个极简静态博客系统过程解析
2019/08/22 Python
Python文字截图识别OCR工具实例解析
2020/03/05 Python
用python实现名片管理系统
2020/06/18 Python
联想瑞士官方网站:Lenovo Switzerland
2017/11/19 全球购物
怎么处理XML的中文问题
2015/03/26 面试题
巡警年度自我鉴定
2014/02/21 职场文书
大学校务公开实施方案
2014/03/31 职场文书
幼儿园大班家长评语
2014/04/17 职场文书
学校社会实践活动总结
2014/07/03 职场文书
幼儿园家长安全责任书
2014/07/22 职场文书
SpringBoot连接MySQL获取数据写后端接口的操作方法
2021/11/02 MySQL
Vue的过滤器你真了解吗
2022/02/24 Vue.js