VUE工程不同环境配置及自定义环境值

Vue 工程在不同环境有自己的环境配置需求，具体环境配置（含自定义变量）步骤如下：

1、package.json定义vue环境加载入口。

"scripts": {
    "dev": "vue-cli-service serve --mode development",
    "build": "vue-cli-service build --mode development",
    "build:dev": "vue-cli-service build --mode development",
    "build:test": "vue-cli-service build --mode test",
    "build:press": "vue-cli-service build --mode press",
    "build:prod": "vue-cli-service build --mode production",
    "build:stage": "vue-cli-service build --mode staging"
    }

这段代码决定工程启动和构建使用那个环境，并且会加载工程下的相应环境配置文件。

2、定义环境文件 .env.xxx

按步骤一中内容看，每个构建都有自己的mode，vue会自动的把环境信息注入到process.env。所以我们只需要定义相应环境的文件即可，此处以开发环境为例，工程下创建 " .evn.development"文件。假设内容如下：

VUE_APP_TEST = '1'

此处定义了一个自定义的变量，变量的名称有固定规则，VUE_APP_xxx ，这个前缀固定的，取其他名字无效。

3、使用

使用process.env.xxx 即可取到自己的变量。
其实，vue默认会根据步骤1里信息启动时注入env环境信息，比如process.env.NODE_ENV.如果只是区分环境的话，这个变量足够了。如果还需要不同环境处理不同的事情，那就可以自定义变量。