vue-cli3.0 环境变量解释(自己收藏)

1.配置npm run 的模式

 在项目的根目录编辑package.json，分为开发 测试 生产 甚至更多。

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

2.创建环境配置文件

在项目的根目录新建以下文件

.env.dev  .env.test .env.prod 

.env # 在所有的环境中被载入

.env.local # 在所有的环境中被载入，但会被 git 忽略

.env.[mode] # 只在指定的模式中被载入

.env.[mode].local # 只在指定的模式中被载入，但会被 git 忽略

3.配置环境的默认变量

  只能配置 NODE_ENV=production   webpack的读取NODE_ENV配置才启用压缩逻辑，默认是dev的NODE_ENV所以打包出来特别大

NODE_ENV = 'production'

4.配置.env环境的业务变量

VUE_APP_NAME= 'abc'

只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。你可以在应用的代码中这样访问它们：

console.log(process.env.VUE_APP_NAME)