Vue项目 .env .env.development .env.production 配置说明

1.模式模式是 Vue CLI 项目中一个重要的概念。默认情况下，一个 Vue CLI 项目有三个模式：development 模式用于 vue-cli-service serveproduction 模式用于 vue-cli-service build 和 vue-cli-service test:e2etest 模式用于 vue-cli-service test:unit你可以通过传递 --m

coding苏

8102人浏览 · 2021-12-16 15:54:09

coding苏 · 2021-12-16 15:54:09 发布

1.模式
模式是 Vue CLI 项目中一个重要的概念。默认情况下，一个 Vue CLI 项目有三个模式：

development 模式用于 vue-cli-service serve
production 模式用于 vue-cli-service build 和 vue-cli-service test:unit
test 模式用于 vue-cli-service test:unit

"scripts": {
   "dev": "vue-cli-service serve",
   "serve": "vue-cli-service serve",
   "build": "vue-cli-service build",
   "build:test": "vue-cli-service build --mode test",
   "build:pre": "vue-cli-service build --mode pre",
   "lint": "vue-cli-service lint",
   "test:unit": "vue-cli-service test:unit"
 },

你可以通过传递 --mode 选项参数为命令行覆写默认的模式。例如，如果你想要在构建命令中使用开发环境变量：

vue-cli-service build --mode development

2.不同的模式会有不同的环境变量NODE_ENV
在 development 模式下 NODE_ENV 的值会被设置为 “development”
在 production模式下 NODE_ENV 的值会被设置为 “production”

3.文件加载及顺序
.env 无论开发环境还是生产环境都会加载的配置文件
.env.development 开发环境加载的配置文件
.env.production 生产环境加载的配置文件
在这里插入图片描述
研发环境加载顺序：.env .env.development 同一个变量名后者会覆盖前者
生产环境加载顺序：.env .env.production 同一个变量名后者会覆盖前者

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

强调一下： process.env.NODE_ENV默认只有两种状态即development和production，development指代本地开发即localhost环境（本地的开发），而production代表发布在任何服务上的服务（不管是dat、uat还是生产环境），node是不知道你服务是测试还是正式，除非你手动指定。通常认为都是线上环境。所以可以这样认为development代表本地开发环境，production代表线上环境（包括dat、uat和生产环境等）

我为什么会强调这一点呢？
因为有人居然用process.env.NODE_ENV中的development来代表dat，uat等线上的测试环境，所以特别强调一下，development代表本地的开发环境。