vue-cli中引入环境变量配置

1，一般一个项目都会有以下 3 种环境：- 开发环境- 测试环境- 生产环境
我们可以在根目录下创建以下形式的文件进行不同环境下变量的配置：

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

如官方文档所说，通过为.env文件增加后缀来设置某个模式下特有的环境变量。

在这里插入图片描述

2.我这里创建一个名为 .env.stage的文件，该文件表明其只在 stage（测试）环境下被加载，在这个文件中，我们可以配置如下键值对的变量：

NODE_ENV=stage//环境名称
VUE_APP_TITLE=stage mode
VUE_APP_BASE_URL = 'groupClient'
VUE_APP_BASE_API = '/massgroup'

3.这时候我们怎么在 vue.config.js 中访问这些变量呢？很简单，使用 process.env.[name] 进行访问就可以了，比如：

// vue.config.js的service.interceptors.response.use(res => {中

console.log("当前环境变量："+process.env.NODE_ENV) // development（在终端输出）
console.log("当前环境路径："+process.env.VUE_APP_BASE_URL)
console.log("当前环境路径："+process.env.VUE_APP_BASE_API)

3.当你运行 npm serve 命令后会发现输出的是 development，因为 vue-cli-service serve 命令默认设置的环境是development，你需要修改 package.json 中的 serve 脚本的命令为：

"scripts": {
    "serve": "vue-cli-service serve --mode stage",
}

–mode stage其实就是修改了 webpack 4 中的 mode 配置项为 stage，同时其会读取对应 .env.[model]文件下的配置，如果没找到对应配置文件，其会使用默认环境 development，同样 vue-cli-service build 会使用默认环境 production。

这时候如果你再创建一个 .env 的文件，再次配置重复的变量，但是值不同，如：

NODE_ENV=staging
VUE_APP_TITLE=staging mode
VUE_APP_NAME=project

文章摘录自

https://www.jianshu.com/p/33428dd6cb8a