VUE项目使用.env文件配置全局环境变量
时间:2022-07-24
本文章向大家介绍VUE项目使用.env文件配置全局环境变量,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
文件名
关于文件名:必须以如下方式命名,不要乱起名,也无需专门手动控制加载哪个文件
.env 全局默认配置文件,不论什么环境都会加载合并
.env.development 开发环境下的配置文件
.env.production 生产环境下的配置文件
内容
注意:属性名必须以VUE_APP_开头,比如VUE_APP_URL VUE_APP_XXX
文件的加载
根据启动命令vue会自动加载对应的环境,vue是根据文件名进行加载的,所以上面说“不要乱起名,也无需专门控制加载哪个文件”
比如执行npm run serve命令,会自动加载.env.development文件
注意:.env文件无论是开发还是生成都会加载的公用文件
配置package.json文件可以具体设置启动具体加载哪个.env.XXX文件
"scripts": {
"dev": "vue-cli-service serve",
"build": "vue-cli-service build",
"dev:prod": "vue-cli-service serve --mode production",
"dev:test": "vue-cli-service serve --mode test",
"dev:kunpeng": "vue-cli-service serve --mode kunpeng",
"build:prod": "vue-cli-service build --mode production",
"build:test": "vue-cli-service build --mode test",
"build:kunpeng": "vue-cli-service build --mode kunpeng",
"build:dev": "vue-cli-service build --mode development",
"build:stage": "vue-cli-service build --mode staging",
"preview": "node build/index.js --preview",
"lint": "eslint --ext .js,.vue src",
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
"new": "plop"
},
"dev:kunpeng": "vue-cli-service serve --mode kunpeng",
"dev:kunpeng": "vue-cli-service serve --mode kunpeng" 启动的时候就会加载.env.kunpeng文件。
.env文件都要加载如果两个文件有相同一个项,后加载文件会覆盖第一个文件。
- 重置网卡命令
- ASP.NET Core依赖注入解读&使用Autofac替代实现
- Python标准库12 数学与随机数 (math包,random包)
- .Net魔法堂:发个带附件的邮件
- apache域名绑定(appserv环境)
- JS魔法堂:那些困扰你的DOM集合类型
- ASP.NET Core 介绍和项目解读
- 【手把手教你全文检索】Lucene索引的【增、删、改、查】
- 红方块躲避—天才游戏
- .NET Core全新路线图(译)
- JS魔法堂:阻止元素被选中
- CSS3魔法堂:禁止用户改变textarea大小
- CentOS6.5菜鸟之旅:VIM插件NERDtree初探
- CentOS6.5菜鸟之旅:安装输入法(小呀小企鹅)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 又陷入知识盲区了,面试被问Redis事务,我差点脸都“绿”了
- Mybatis中#{}与${}的区别
- POI合并单元格
- Centos7.x安装Docker
- 实在是妙啊!Java中强软虚弱引用,居然还能这样去操作
- 数据库连接池引起的FullGC问题,看我如何一步步排查、分析、解决
- Swift 数组dropFirst方法
- Swift 类方法和实例方法
- 我从未见过的牛逼解说方式!Redis五种数据结构,看一遍就懂了
- Swift 动态创建ViewController
- Office 文档解析 文档格式和协议
- 查看centos 7里敏感信息的常用命令(未完)
- C# dotnet 使用 FileStream 随机文件读写
- datables之加载数据时显示进度条
- 这几种常见的“分布式锁”写法,搞懂再也不怕面试官,安排