vue-ci3 环境变量

一个项目前端开发过程当中，通常会经历本地开发，测试脚本， 开发自测 ，测试环境 ，预上线环境 才能正式发布。对应每一个环境均可能有所差别，如 服务器地址，后台接口地址等。因此在环境切换时，就须要不一样的配置参数，这时候就能够使用环境变量和模式，来方便咱们管理。

vue-cli3总共提供了四种方式来指定环境变量

1.在根目录添加.env文件，配置全部状况下都会用到的配置（不知道这个存在的意义，全部的都须要的也就不须要配置了吧）。
2.在根目录添加.env.local文件，配置全部状况下都会用到的配置，与.env的区别是只会在本地，该文件不会被git跟踪。
能够在这文件下，设置开发api接口和rap接口

3.在根目录添加.env.[mode]文件，配置对应某个模式下的配置,好比：.env.development来配置开发环境的配置。

4.在根目录添加.env.[mode].local文件，配置对应某个模式下的配置,与.env.[mode]的区别也只是会在本地生效，该文件不会被git跟踪。

环境加载优先级：同一个key: .env.[mode].local > .env.[mode] > .env

在运行命令时为NODE_ENV赋值，去设置此时运行的应用的环境模式。
每一个模式都会将NODE_ENV的值设置为模式的名称——好比在 development 模式下 NODE_ENV 的值会被设置为 "development"

默认状况下Vue Cli项目有三种模式，

development：在vue-cli-service serve下，即开发环境使用
production：在vue-cli-service build 和vue-cli-service test:e2e下，即正式环境使用
test： 在vue-cli-service test:unit下使用

在package.json

{
  "scripts": {
    "serve": "vue-cli-service serve",  // vue-cli-service serve --mode development，不带mode参时默认是开发环境
    "build": "vue-cli-service build",  // vue-cli-service build --mode production，不带mode参时默认是生产环境
    "lint": "vue-cli-service lint",
   
    //本身新建一个模式：须要在项目根目录新建.env.stage1文件，在.env.stage1文件里声明变量
    //会在 stage1 模式下加载可能存在的 .env、.env.stage1 和 .env.stage1.local 文件而后构建出生产环境应用。
    "stage1" :"vue-cli-service serve --mode stage1"
  },
}

 

环境变量：

在.env文件中，只有以VUE_APP_开头的变量会被webpack.DefinePlugin静态嵌入到客户端侧的包中。环境变量必须以VUE_APP_开头。

 

示例：