.env .env.development .env.production 配置说明

安装 vue-cli

npm install -g @vue/cli

创建项目

vue create envtest

启动项目

npm run serve

根目录下创建 .env .env.development .env.production 3个文件

文件说明

.env 无论开发环境还是生产环境都会加载的配置文件 .env.development 开发环境加载的配置文件
.env.production 生产环境加载的配置文件

文件目录

.env 文件

NODE_ENV = development
VUE_APP_URL = 'development'

.env.development 文件

NODE_ENV = development
VUE_APP_URL = 'development'

.env.production 文件

NODE_ENV = development
VUE_APP_URL = 'production'

文件说明

这里是引用
自定义的变量以 VUE_APP 开头

访问配置文件变量

 data(){return {url:process.env.VUE_APP_URL}},mounted() {console.log('环境变量',this.url)},

本地启动

npm run serve

打印日志

环境变量 development

本地打包部署
采用serve在本地模拟部署
全局安装 serve

npm i serve -g

在各个项目的根目录下启动 serve

serve ./dist -p port
举例子
serve ./dist -p 8000

打印日志

环境变量 production

结果说明

研发环境默认加载 .env.development 文件
生产环境默认加载 .env.production 文件

其他配置

.env.test

NODE_ENV = development
VUE_APP_URL = 'test'

加载对应文件方式

package 配置
– mode 表示加载对应的配置文件

"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"serve:test": "vue-cli-service serve --mode test"

启动方式

npm run serve:test

打印日志

环境变量,test

疑惑解答

为什么我们本地启加载 .env.development 服务器加载 .env.production

比如我们平常通过npm run serve启动时，我们本地系统的环境变量NODE_ENV
值默认是development，这时就会先后加载.env和.env.development这两个文件。
而当我们打包到服务器后，服务器的NODE_ENV值一般为production，则此时Vue仍会先加载.env文件，然后加载.env.production文件。

变量覆盖问题加载顺序问题

研发环境加载顺序
.env
.env.development
同一个变量名后者会覆盖前者

生产环境加载顺序
.env
.env.production
同一个变量名后者会覆盖前者

我是菜鸟～谢谢关注

.env .env.development .env.production 配置说明相关推荐

Vue项目 .env .env.development .env.production 配置说明
1.模式模式是 Vue CLI 项目中一个重要的概念.默认情况下,一个 Vue CLI 项目有三个模式: development 模式用于 vue-cli-service serve product ...
Vue2 中 .env.development .env.production 详细说明
简介 Vue CLI 项目中一个重要的概念.默认情况下,一个 Vue CLI 项目有三个模式: development 模式用于 vue-cli-service serve production ...
vue中的.env | .env.development | .env.production的使用
.env--全局默认配置文件,无论什么环境都会加载合并 .env.development--开发环境下的配置文件 .env.production--生产环境下的配置文件注意:属性名必须以VUE_AP ...
development 和 production 模式的区别
webpack中两种开发模式development 和 production 的区分打包当我们在开发一个项目的时候,一般用development这个环境进行项目的开发,在这个打包环境下,webpac ...
webpack的development和production模式
webpack的development和production模式 webpack打包模式 development模式开发环境不会对打包生成的文件进行代码压缩和性能优化. 打包速度快,适合在开发阶段 ...
vue中有关.env；.env.development,.env.production的相关介绍
1,关于文件名:必须以如下方式命名,不要乱起名,也无需专门手动控制加载哪个文件 .env 全局默认配置文件,不论什么环境都会加载合并 .env.development 开发环境下的配置文件 .env. ...
vue中 .env .env.development .env.production 详细说明
1.配置文件有: .env 全局默认配置文件,不论什么环境都会加载合并 .env.development 开发环境下的配置文件 .env.production 生产环境下的配置文件 2.命名规则: 属 ...
Vue中.env|.env.development|.env.production文件说明
0.介绍模式是Vue CLI项目中一个重要的概念,默认情况下,一个Vue CLI项目有三种模式: developemt 模式用于vue-cli-service serve test 模式用于vue- ...
set up ovn development env (by quqi99)
作者:张华发表于:2022-07-08 版权声明:可以任意转载,转载时请务必以超链接形式标明文章原始出处和作者信息及本版权声明编译ovs并启动ovs-vswitchd #https://docs. ...

.env .env.development .env.production 配置说明

.env .env.development .env.production 配置说明

文件说明

文件目录

文件说明

访问配置文件变量

结果说明

其他配置

疑惑解答

.env .env.development .env.production 配置说明相关推荐

最新文章

热门文章