解释 Vue CLI 中的环境变量和模式（Modes）如何实现不同环境下的配置管理。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位靓仔靓女，大家好！今天咱们来聊聊 Vue CLI 里那些让人又爱又恨的环境变量和模式（Modes）。放心，不会搞那些虚头巴脑的概念，保证用最接地气的方式，让你彻底搞明白它们是怎么回事，以及怎么用它们来管理不同环境下的配置。

开场白：项目配置管理的那些糟心事儿

话说，作为一个合格的程序员，我们每天都要跟各种各样的环境打交道：开发环境、测试环境、预发布环境、生产环境……每个环境的配置可能都不一样，比如 API 地址、数据库连接信息、第三方服务的密钥等等。

如果没有一个好的管理方法，结果可能就是：

手动修改配置： 每次部署到新环境都要改一堆代码，一不小心就改错了，然后就等着被老板骂吧。
配置文件满天飞： config.dev.js、config.test.js、config.prod.js，光配置文件就够你喝一壶的，而且还容易搞混。
代码里写死配置： 这绝对是灾难！不仅不方便修改，而且还容易把敏感信息暴露出去。

所以，我们需要一个优雅、高效的配置管理方案，而 Vue CLI 提供的环境变量和模式，就是解决这个问题的利器。

第一部分：环境变量：变量，还是你熟悉的那个变量

环境变量，顾名思义，就是可以在操作系统中设置的变量，Vue CLI 可以读取这些变量，并在构建过程中使用它们。

1. 环境变量文件：你的配置文件管家

Vue CLI 约定了一些特殊的文件来存放环境变量：

.env: 默认情况下加载的所有环境共享的配置。
.env.local: 本地开发环境的配置，会被 git 忽略。
.env.[mode]: 指定模式的配置，例如 .env.development、.env.production。
.env.[mode].local: 指定模式的本地配置，例如 .env.development.local，会被 git 忽略。

这些文件的优先级是：

[mode].local > [mode] > local > default

也就是说，.env.development.local 里的变量会覆盖 .env.development 里的同名变量，以此类推。

2. 环境变量的命名规则：要有规矩，才好办事

为了避免冲突，Vue CLI 要求自定义的环境变量必须以 VUE_APP_ 开头。例如：

# .env.development
VUE_APP_API_BASE_URL=http://localhost:8080/api
VUE_APP_DEBUG=true

3. 在代码中使用环境变量：像用普通变量一样

在 Vue 组件或 JavaScript 代码中，可以通过 process.env 对象来访问环境变量。注意，Vue CLI 会自动将环境变量注入到 process.env 中。

// MyComponent.vue
<template>
  <div>
    API Base URL: {{ apiBaseUrl }}
  </div>
</template>

<script>
export default {
  computed: {
    apiBaseUrl() {
      return process.env.VUE_APP_API_BASE_URL;
    },
  },
};
</script>

4. 实战演练：开发环境和生产环境配置切换

假设我们需要在开发环境中使用本地 API，而在生产环境中使用线上 API。

首先，创建 .env.development 文件：

# .env.development
VUE_APP_API_BASE_URL=http://localhost:8080/api
VUE_APP_DEBUG=true

然后，创建 .env.production 文件：

# .env.production
VUE_APP_API_BASE_URL=https://api.example.com
VUE_APP_DEBUG=false

在代码中，我们可以这样使用：

// api.js
const API_BASE_URL = process.env.VUE_APP_API_BASE_URL;
const DEBUG = process.env.VUE_APP_DEBUG === 'true'; // 注意：环境变量的值都是字符串

export function fetchData(url) {
  const fullUrl = API_BASE_URL + url;
  if (DEBUG) {
    console.log(`Fetching data from: ${fullUrl}`);
  }
  return fetch(fullUrl).then(response => response.json());
}

表格总结：环境变量文件及其用途

文件名	用途
`.env`	所有环境共享的默认配置。
`.env.local`	本地开发环境配置，优先级高于 `.env`，会被 git 忽略。
`.env.[mode]`	指定模式的配置，例如 `.env.development`、`.env.production`。
`.env.[mode].local`	指定模式的本地配置，例如 `.env.development.local`，优先级高于 `.env.[mode]`，会被 git 忽略。

第二部分：模式（Modes）：构建流程的指挥棒

模式（Modes）是 Vue CLI 中一个非常重要的概念，它可以让你在不同的构建流程中使用不同的配置。简单来说，模式就是告诉 Vue CLI 你现在要构建什么环境的代码。

1. 内置模式：开发、生产、测试

Vue CLI 内置了三种模式：

development: 用于开发环境，会启用热重载、Source Map 等特性，方便调试。
production: 用于生产环境，会对代码进行压缩、优化，提高性能。
test: 用于单元测试环境。

2. 自定义模式：想怎么玩，就怎么玩

除了内置模式，你还可以自定义模式。例如，你可以创建一个 staging 模式，用于预发布环境。

要使用自定义模式，只需要在运行 Vue CLI 命令时，通过 --mode 参数指定即可。例如：

vue-cli-service build --mode staging

3. 模式的作用：影响构建过程的方方面面

模式会影响 Vue CLI 的构建过程，包括：

环境变量的加载： Vue CLI 会根据指定的模式加载对应的环境变量文件。
webpack 配置： Vue CLI 会根据指定的模式调整 webpack 的配置，例如是否启用代码压缩、是否生成 Source Map 等。
插件的启用： Vue CLI 会根据指定的模式启用或禁用某些插件。

4. 实战演练：根据模式加载不同的 API 地址

假设我们需要在 development 模式下使用本地 API，在 production 模式下使用线上 API，而在 staging 模式下使用预发布环境的 API。

首先，创建 .env.development 文件：

# .env.development
VUE_APP_API_BASE_URL=http://localhost:8080/api

然后，创建 .env.production 文件：

# .env.production
VUE_APP_API_BASE_URL=https://api.example.com

接着，创建 .env.staging 文件：

# .env.staging
VUE_APP_API_BASE_URL=https://staging.example.com/api

现在，我们就可以通过不同的命令来构建不同环境的代码了：

# 开发环境
vue-cli-service serve --mode development

# 生产环境
vue-cli-service build --mode production

# 预发布环境
vue-cli-service build --mode staging

5. vue.config.js 中的 chainWebpack 和 configureWebpack：更高级的配置

如果你需要对 webpack 的配置进行更细粒度的控制，可以使用 vue.config.js 文件中的 chainWebpack 和 configureWebpack 选项。

chainWebpack 允许你使用 webpack 的 chain API 来修改 webpack 的配置，它提供了更灵活的配置方式。

configureWebpack 允许你直接修改 webpack 的配置对象，或者返回一个配置对象。

例如，我们可以根据不同的模式设置不同的 webpack 插件：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 生产环境
      config.plugin('webpack-bundle-analyzer')
        .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin);
    } else {
      // 开发环境
      // ...
    }
  },
};

表格总结：模式及其用途

模式	用途
`development`	用于开发环境，启用热重载、Source Map 等特性，方便调试。
`production`	用于生产环境，对代码进行压缩、优化，提高性能。
`test`	用于单元测试环境。
自定义模式	可以自定义模式，用于不同的环境，例如 `staging`、`qa` 等。通过 `--mode` 参数指定。

第三部分：最佳实践：让你的配置管理更上一层楼

掌握了环境变量和模式的基本用法，接下来我们来看看一些最佳实践，让你的配置管理更上一层楼。

1. 不要把敏感信息提交到代码仓库

千万不要把 API 密钥、数据库密码等敏感信息直接写在代码里或者提交到代码仓库。可以使用环境变量来存储这些信息，并将 .env.local 文件添加到 .gitignore 文件中。

2. 使用 CI/CD 工具管理环境变量

在持续集成/持续部署（CI/CD）环境中，可以使用 CI/CD 工具来管理环境变量。例如，可以在 Jenkins、GitLab CI、GitHub Actions 等工具中设置环境变量，然后在构建过程中将这些变量注入到 Vue CLI 中。

3. 使用配置管理工具

如果你的项目比较复杂，可以使用一些专业的配置管理工具，例如 Consul、etcd、ZooKeeper 等。这些工具可以提供更强大的配置管理能力，例如动态配置更新、配置版本控制等。

4. 明确区分不同环境的配置

在不同的环境中，配置的差异可能会很大。为了避免混淆，建议明确区分不同环境的配置，例如使用不同的环境变量文件、不同的 webpack 配置等。

5. 编写清晰的文档

编写清晰的文档，说明如何配置和使用环境变量，可以方便团队成员协作，减少出错的可能性。

代码示例：使用 dotenv 库加载 .env 文件

虽然 Vue CLI 已经内置了对 .env 文件的支持，但在某些情况下，你可能需要在 Node.js 代码中手动加载 .env 文件。可以使用 dotenv 库来实现这个功能。

首先，安装 dotenv 库：

npm install dotenv

然后，在 Node.js 代码中加载 .env 文件：

// server.js
require('dotenv').config(); // 加载 .env 文件

const API_KEY = process.env.API_KEY;

console.log(`API Key: ${API_KEY}`);

总结：掌握配置管理，告别加班烦恼

好了，今天的讲座就到这里。希望通过今天的讲解，大家能够彻底搞明白 Vue CLI 中的环境变量和模式，并能够灵活运用它们来管理不同环境下的配置。

记住，好的配置管理可以让你告别手动修改配置的烦恼，提高开发效率，减少出错的可能性。

最后，祝大家早日升职加薪，告别 996！

补充说明：

NODE_ENV 环境变量：这个环境变量是由 Node.js 提供的，用于指示当前运行的环境。Vue CLI 会根据 NODE_ENV 的值来设置默认的模式。例如，当 NODE_ENV 为 production 时，Vue CLI 会自动使用 production 模式。
BASE_URL 环境变量：这个环境变量用于设置应用的 base URL。如果你的应用部署在子目录下，需要设置这个变量，否则可能会导致资源加载失败。

最后的最后，如果还有什么不明白的，欢迎随时提问！

发表回复 取消回复

发表回复取消回复