vue-cli3添加模式配置多环境变量的方法

介绍：vue-cli 3 是 Vue 官方提供的脚手架工具，使用 vue-cli3 可以快速搭建 Vue 项目，添加模式配置多环境变量，常用于项目的部署环境切换、前后端资源访问地址等的切换。本篇攻略介绍 vue-cli3 添加模式配置多环境变量的方法，包括两种示例说明。

准备工作

在使用 vue-cli3 添加模式配置多环境变量之前我们需要准备以下环境和工具：

• Node.js
• Vue CLI 3.x

方法一：使用.env 文件添加模式配置多环境变量

1. 在 Vue 项目根目录下创建以下地方：

.env
.env.development
.env.production
.env.staging

其中 .env 为全局配置文件，.env.development 为开发环境配置，.env.production 为生产环境配置，.env.staging 为测试环境配置（可以根据实际需求创建多个环境配置）。

1. 在 .env 文件中添加以下配置：

VUE_APP_BASE_URL=http://localhost:8080

这里我们定义了一个名为 VUE_APP_BASE_URL 的变量，用于存储基础请求地址。

1. 在 .env.development 中添加以下内容：

NODE_ENV = 'development'

1. 在 .env.production 中添加以下内容：

NODE_ENV = 'production'
VUE_APP_BASE_URL=http://prod.com

1. 在 .env.staging 中添加以下内容：

NODE_ENV = 'staging'
VUE_APP_BASE_URL=http://staging.com

1. 在Vue组件中引用环境变量

在Vue组件中使用时，可以通过 $env 访问环境变量，如：

console.log(process.env.VUE_APP_BASE_URL);

方法二：使用 vue.config.js 文件添加模式配置多环境变量

1. 在 Vue 项目根目录下创建 vue.config.js 文件。

2. 在 vue.config.js 中添加以下内容：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
  devServer: {
    proxy: {
      '/api': {
        target: process.env.VUE_APP_BASE_URL,
        changeOrigin: true
      }
    }
  }
}

这里我们配置了一个开发服务器，并为开发服务器配置了一个代理，在代理中我们通过 process.env.VUE_APP_BASE_URL 获取开发服务器的地址，这个地址我们可以根据不同的环境更换。

1. 在 .env 文件中添加以下配置：

VUE_APP_BASE_URL=http://localhost:8080

这里的配置与方法一的配置一致。

1. 在 .env.development / .env.production / .env.staging 文件中添加以下配置：

NODE_ENV=development

这里的配置与方法一的配置一致。

1. 在 Vue 组件中访问变量

console.log(process.env.VUE_APP_BASE_URL);

以上就是使用 Vue CLI 3 添加模式配置多环境变量的两种方法，根据实际需求选择一个即可。