VUE CLI 环境变量

在前端项目开发过程中，开发环境与生产环境往往具有不同的配置，例如开发测试时请求的是测试服务器的接口，而不是正式服务器的接口，这就需要有方便的方式切换配置。

VUE CLI 提供了环境变量功能，可以用于实现上述需求。

在VUE项目目录下建立 .env.development 文件和 .env.production 文件，分别用于存储开发环境配置和生产环境配置。

两个文件的内容如下：

.env.development

VUE_APP_ABC = "development"

.env.production

VUE_APP_ABC = "production"

值得注意的是，变量名必须以 VUE_APP_ 开头。

在需要使用到环境变量的地方通过 process.env.VUE_APP_ABC 获取的环境变量值，如：

console.log(process.env.VUE_APP_ABC);

在 package.json 文件中修改启动脚本，在serve脚本命令后添加 --mode development ，

在build脚本命令后添加 --mode production 。

"scripts": {
    "serve": "vue-cli-service serve --mode development",
    "build": "vue-cli-service build --mode production"
}

现在使用 npm run serve 启动项目时就会自动在使用环境变量的地方引用开发环境配置的变量值，使用 npm run build 构建项目时引用生产环境配置的变量值。

例如，执行 npm run serve 时，process.env.VUE_APP_ABC 获取到的值为 development 。

执行 npm run build 时，process.env.VUE_APP_ABC 获取到的值为 production 。