.env 文件配置详解

.env 文件配置

文件说明

.env：全局默认配置文件，无论什么环境都会加载合并。

.env.development：开发环境的配置文件

.env.production：生产环境的配置文件

.env.test：测试环境的配置文件

注意：前三个文件的文件名必须按上面方式命名，不能乱起名，否则读取不到文件。

内容格式

NODE_ENV=production
VUE_APP_BAIDU_URL=https://www.baidu.com
VUE_APP_VARIABLE_XXX= '66666'

NODE_ENV 通常这个变量用来区分开发与生产环境，加载不同的配置。

注意：属性名必须以 VUE_APP_ 开头，如：VUE_APP_XXX

加载

vue 会根据启动命令自动加载相对应的环境配置文件。

开发环境加载 .env 和 .env.development 。

生成环境加载 .env 和 .env.production 。

测试环境加载 .env 和 .env.test 。

优先级

环境配置文件 > 全局配置文件

当全局的配置文件和环境的配置文件有相同配置项时，环境的配置项会覆盖全局的配置项

使用

process 对象是一个 global （全局变量），提供有关信息，控制当前 Node.js 进程。

可以使用 process.env.xxx 来访问属性。

例子

vue.config.js

process.env.NODE_ENV            // test
process.env.VUE_APP_BAIDU_URL         // https://www.baidu.com
process.env.VUE_APP_VARIABLE_XXX         // '66666'

.env.test文件

NODE_ENV=test
VUE_APP_BAIDU_URL=https://www.baidu.com
VUE_APP_VARIABLE_XXX= '66666'

package.json配置

"scripts": {
    "serve": "vue-cli-service serve",
    "build:test": "vue-cli-service build --mode test",
    "build": "vue-cli-service build",
  },

打包

npm run build:test
# OR
yarn build:test