关于vue.js:env-文件配置详解

.env 文件配置

文件阐明

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

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

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

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

留神：前三个文件的文件名必须按下面形式命名，不能乱起名，否则读取不到文件。

内容格局

NODE_ENV=productionVUE_APP_BAIDU_URL=https://www.baidu.comVUE_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            // testprocess.env.VUE_APP_BAIDU_URL         // https://www.baidu.comprocess.env.VUE_APP_VARIABLE_XXX         // '66666'

.env.test文件

NODE_ENV=testVUE_APP_BAIDU_URL=https://www.baidu.comVUE_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# ORyarn build:test