阐述 Vue CLI 中的环境变量和模式（Modes）如何实现不同环境下的配置管理。

各位观众，晚上好！今天咱们来聊聊Vue CLI里那些让人头疼，但又不得不爱的环境变量和模式（Modes）。别担心，咱们争取用最接地气的方式，把这些概念搞得明明白白，让以后配置不同环境的Vue项目不再是噩梦。

开场白：环境配置，程序员的甜蜜负担

话说程序员这行，最怕的就是“在我电脑上跑得好好的！”。这种情况十有八九都是环境配置惹的祸。不同环境（开发、测试、生产）需要的配置往往不一样，比如API接口地址、调试开关等等。如果把这些配置硬编码在代码里，那就等着上线后被用户狂喷吧。

Vue CLI作为Vue.js的官方脚手架，早就考虑到了这个问题，提供了强大的环境变量和模式（Modes）机制，让我们能轻松地管理不同环境下的配置。

第一幕：环境变量，幕后英雄的自我修养

环境变量，顾名思义，就是在操作系统中设置的一些变量，可以被程序读取。Vue CLI利用dotenv这个库，让我们可以方便地在项目中使用环境变量。

1. 环境变量文件的约定

Vue CLI约定了一些环境变量文件的命名规则：

• .env: 默认的环境变量文件，所有环境都会加载。
• .env.local: 本地环境变量文件，会被git忽略，用于本地开发环境的配置，优先级高于.env。
• .env.[mode]: 特定模式下的环境变量文件，例如.env.development、.env.production。
• .env.[mode].local: 特定模式下的本地环境变量文件，例如.env.development.local，优先级最高。

优先级：.env.[mode].local > .env.[mode] > .env.local > .env

2. 环境变量文件的格式

环境变量文件采用KEY=VALUE的格式，每行一个变量。注意：

• 变量名只能包含大写字母、数字和下划线。
• 变量值可以用单引号或双引号包裹，也可以不包裹。
• 如果变量值包含空格，建议用引号包裹。

3. 如何使用环境变量

在Vue组件中，可以通过process.env.变量名来访问环境变量。但是，Vue CLI为了安全起见，默认只允许以VUE_APP_开头的环境变量在客户端代码中使用。

举个栗子：

假设我们有一个.env.development文件，内容如下：

VUE_APP_API_BASE_URL=http://localhost:8080/api
VUE_APP_DEBUG=true

然后，在Vue组件中，我们可以这样使用这些变量：

<template>
  <div>
    API Base URL: {{ apiBaseUrl }}
    Debug Mode: {{ debugMode }}
  </div>
</template>

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

注意： 修改环境变量文件后，需要重启vue-cli-service serve才能生效。

4. 环境变量的配置

Vue CLI提供了一个vue.config.js文件，可以用来配置项目的构建行为。我们可以在这个文件中配置环境变量。

// vue.config.js
module.exports = {
  // ...
  chainWebpack: config => {
    config.plugin('define').tap(args => {
      args[0]['process.env'] = {
        ...args[0]['process.env'], // 保留现有的环境变量
        MY_CUSTOM_VAR: JSON.stringify(process.env.MY_CUSTOM_VAR || 'default value') // 添加自定义环境变量
      };
      return args;
    });
  }
  // ...
};

这里我们使用 chainWebpack 来修改 webpack 的配置。 config.plugin('define') 允许我们定义全局变量。 我们将 process.env 中的变量添加到全局变量中。 注意使用 JSON.stringify 来确保变量是字符串类型。

第二幕：模式（Modes），环境切换的魔法棒

模式（Modes）是Vue CLI提供的一种更高级的环境配置机制。它可以让我们根据不同的模式，执行不同的构建命令，加载不同的环境变量文件。

1. 默认模式

Vue CLI默认提供了三种模式：

• development: 开发模式，用于本地开发。
• production: 生产模式，用于构建发布版本。
• test: 测试模式，用于运行单元测试。

2. 如何指定模式

可以通过在命令行中指定--mode参数来指定模式。例如：

vue-cli-service serve --mode development  # 启动开发服务器，使用开发模式
vue-cli-service build --mode production    # 构建生产版本，使用生产模式
vue-cli-service test:unit --mode test      # 运行单元测试，使用测试模式

3. 自定义模式

除了默认模式，我们还可以自定义模式。例如，我们可以创建一个staging模式，用于构建预发布版本。

要自定义模式，只需要创建一个.env.staging文件，并在package.json中添加相应的构建命令即可。

例如，我们在.env.staging文件中添加如下内容：

VUE_APP_API_BASE_URL=http://staging.example.com/api
VUE_APP_DEBUG=false

然后在package.json中添加如下命令：

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:staging": "vue-cli-service build --mode staging", // 添加staging模式的构建命令
    "test:unit": "vue-cli-service test:unit"
  }
}

这样，我们就可以通过npm run build:staging命令来构建预发布版本了。

4. 模式与环境变量的关系

当我们指定了模式后，Vue CLI会自动加载对应的.env.[mode]和.env.[mode].local文件。例如，当我们使用development模式时，Vue CLI会加载.env.development和.env.development.local文件。

表格总结：

文件名	模式	描述	优先级
.env	所有模式	默认的环境变量文件，所有模式都会加载。	低
.env.local	所有模式	本地环境变量文件，会被git忽略，用于本地开发环境的配置，优先级高于.env。	较高
.env.[mode]	指定模式	特定模式下的环境变量文件，例如.env.development、.env.production。	较高
.env.[mode].local	指定模式	特定模式下的本地环境变量文件，例如.env.development.local，优先级最高。	高

第三幕：实战演练，打造多环境配置的Vue项目

现在，我们来做一个实战演练，创建一个具有开发、测试、生产三个环境配置的Vue项目。

1. 创建Vue项目

首先，使用Vue CLI创建一个新的Vue项目：

vue create my-vue-app

选择默认配置即可。

2. 创建环境变量文件

在项目根目录下创建以下环境变量文件：

• .env.development:

VUE_APP_API_BASE_URL=http://localhost:8080/api
VUE_APP_DEBUG=true

• .env.test:

VUE_APP_API_BASE_URL=http://test.example.com/api
VUE_APP_DEBUG=false

• .env.production:

VUE_APP_API_BASE_URL=http://production.example.com/api
VUE_APP_DEBUG=false

3. 修改Vue组件

修改src/components/HelloWorld.vue组件，使用环境变量：

<template>
  <div>
    API Base URL: {{ apiBaseUrl }}
    Debug Mode: {{ debugMode }}
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      apiBaseUrl: process.env.VUE_APP_API_BASE_URL,
      debugMode: process.env.VUE_APP_DEBUG,
    };
  },
};
</script>

4. 测试不同环境的配置

启动开发服务器：

npm run serve

此时，apiBaseUrl应该显示http://localhost:8080/api，debugMode应该显示true。

构建测试版本：

npm run build --mode test

构建生产版本：

npm run build --mode production

构建完成后，分别查看dist目录下的index.html文件，apiBaseUrl和debugMode的值应该与对应的环境变量文件中的配置一致。

第四幕：高级技巧，让配置更上一层楼

除了基本用法，Vue CLI的环境变量和模式还有一些高级技巧，可以让我们更好地管理配置。

1. 使用BASE_URL环境变量

Vue CLI提供了一个特殊的环境变量BASE_URL，用于指定应用的公共基础路径。这个变量在开发和生产环境中可能不一样。

例如，在开发环境中，BASE_URL通常是/，而在生产环境中，可能是/my-app/。

我们可以在vue.config.js中配置publicPath选项，来使用BASE_URL环境变量：

// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? process.env.BASE_URL
    : '/'
};

2. 使用vue inspect命令

vue inspect命令可以用来查看Vue CLI的内部配置。我们可以使用这个命令来调试环境变量和模式的配置。

例如，要查看development模式下的配置，可以运行以下命令：

vue inspect --mode development

3. 使用第三方库来管理配置

除了Vue CLI自带的环境变量和模式机制，我们还可以使用第三方库来管理配置。例如，config、nconf等库都提供了强大的配置管理功能。

第五幕：常见问题与避坑指南

在使用Vue CLI的环境变量和模式时，可能会遇到一些问题。下面是一些常见问题和避坑指南：

• 问题： 修改环境变量文件后，没有生效。
  解决方案： 重启vue-cli-service serve。
• 问题： 无法在客户端代码中访问环境变量。
  解决方案： 确保环境变量以VUE_APP_开头。
• 问题： 构建后的代码中，环境变量的值不正确。
  解决方案： 检查环境变量文件是否正确，以及构建命令是否指定了正确的模式。
• 问题： 使用了特殊的字符在环境变量里面，导致解析错误。
  解决方案： 使用双引号或者单引号包裹变量的值。
• 关于安全问题： 不要在客户端代码中存储敏感信息，例如API密钥。 环境变量主要用来配置那些可以公开的信息。

总结：

好了，今天的讲座就到这里。希望通过今天的讲解，大家对Vue CLI的环境变量和模式有了更深入的了解。记住，灵活运用这些工具，可以让我们更好地管理不同环境下的配置，避免上线后出现各种奇葩问题。 祝大家编程愉快，bug永不相见！