关于vue.js: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