Vue3之 Vue CLI多环境配置

下面是关于Vue CLI多环境配置的完整攻略。

环境变量

在实际开发中，一个项目可能需要在不同的环境中运行，例如开发环境、测试环境和生产环境等。为了方便统一管理和运用环境变量，Vue CLI提供了一种简单的方式来管理环境变量和配置。它使用.env.*（如.env.development、.env.production等）文件作为环境变量文件，可以在运行开发或生产环境时自动加载。

整体配置

首先，我们需要在根目录下的.env文件中定义通用的环境变量，如API接口的基本地址、是否启用Mock数据等通用配置。.env文件内容如下：

# API接口地址
VUE_APP_API_BASE_URL=http://localhost:3000/api

# 是否启用Mock
VUE_APP_USE_MOCK=true

注：这里的参数名都需要使用VUE_APP_前缀。

接着，在根目录下新建.env.development和.env.production文件分别对应开发环境和生产环境的配置。例如，.env.development文件可定义如下内容：

# 开发环境API接口地址
VUE_APP_API_BASE_URL=http://localhost:3000/api

# 开发环境是否启用Mock
VUE_APP_USE_MOCK=true

而.env.production文件则有不同的配置项：

# 生产环境API接口地址
VUE_APP_API_BASE_URL=https://prod.api.example.com

# 生产环境是否启用Mock
VUE_APP_USE_MOCK=false

配置示例

示例1：使用环境变量控制API接口地址

以下是一个示例，演示如何使用环境变量来动态控制API接口地址。假设我们有一个ApiService模块，负责与后端API进行交互。在ApiService中，我们可以这样使用环境变量：

import axios from 'axios'

const BASE_URL = process.env.VUE_APP_API_BASE_URL

export default {
  getAllUsers() {
    return axios.get(`${BASE_URL}/users`)
  },
  getUserById(id) {
    return axios.get(`${BASE_URL}/users/${id}`)
  },
  ...
}

这样，当我们需要更改API接口地址时，只需修改相应的环境变量值即可。

示例2：使用环境变量控制Mock数据

以下是第二个示例，演示如何使用环境变量来控制Mock数据。以Vue-CLI3.0以上版本为例，我们可以在vue.config.js配置文件中进行如下配置：

module.exports = {
  devServer: {
    before: app => {
      if (process.env.VUE_APP_USE_MOCK === 'true') {
        app.use(...)
      }
    }
  },
  ...
}

具体地，我们通过判断是否启用Mock数据，来决定是否通过app.use()方法启用Mock服务。