解释 Vue CLI 如何处理环境变量和模式 (`.env` 文件)，以实现不同环境下的构建差异。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

大家好，我是老码，今天咱们来聊聊 Vue CLI 是怎么玩转环境变量和模式的，让你的项目在不同环境下像变魔术一样，自动切换配置。这可是项目部署的必备技能，学会了能少掉不少头发。

开场白：环境，模式，傻傻分不清？

在软件开发的世界里，我们经常会听到“环境”和“模式”这两个词。它们就像一对双胞胎，长得很像，但又各有各的脾气。简单来说：

环境 (Environment)：指的是你的应用运行的物理或虚拟场所。比如，开发环境、测试环境、生产环境，就像你的应用住不同的房子。
模式 (Mode)：则是 Vue CLI 提供的一种预设配置，它会影响你的构建过程。比如，development 模式适合开发，production 模式适合发布。

Vue CLI 巧妙地将这二者结合，让你能够根据不同的环境，应用不同的模式，从而实现构建的差异化。

第一幕：.env 文件——配置的魔法城堡

Vue CLI 依赖于 dotenv 这个库来读取环境变量。它允许你把配置信息写在 .env 文件里，然后在你的代码里像读取全局变量一样使用它们。

.env 文件的基本语法

.env 文件就是一个简单的文本文件，每一行都是一个键值对，格式如下：
```
VUE_APP_API_URL=http://localhost:8080/api
VUE_APP_TITLE=My Awesome App
```
- 键名必须以 VUE_APP_ 开头，这是 Vue CLI 的硬性规定。这样做的目的是为了防止不小心暴露敏感信息。
- 键值对之间用等号 = 分隔。
- 字符串值可以不用引号包裹，但如果值包含空格或特殊字符，最好用引号括起来。
创建不同环境的 .env 文件

为了区分不同环境的配置，你可以创建多个 .env 文件，并用特定的后缀来命名：
- .env.development：开发环境的配置
- .env.production：生产环境的配置
- .env.test：测试环境的配置
例如，.env.development 的内容可能是：
```
VUE_APP_API_URL=http://localhost:8080/api
VUE_APP_DEBUG=true
```
而 .env.production 的内容可能是：
```
VUE_APP_API_URL=https://my-awesome-app.com/api
VUE_APP_DEBUG=false
```
优先级规则

如果多个 .env 文件中定义了同一个变量，Vue CLI 会按照以下优先级顺序来加载它们：
- .env.[mode].local
- .env.local
- .env.[mode]
- .env
其中，[mode] 是指当前使用的模式，比如 development 或 production。

*.local 文件用于覆盖本地的配置，并且会被 Git 忽略，因此非常适合存放一些敏感信息，比如 API 密钥。

举个例子，如果你同时有 .env, .env.development, 和 .env.development.local 三个文件，它们都定义了 VUE_APP_API_URL 变量，那么最终生效的将是 .env.development.local 中定义的值。

第二幕：在代码中使用环境变量

在 Vue 组件或 JavaScript 代码中，你可以通过 process.env 对象来访问环境变量。

// MyComponent.vue
export default {
  mounted() {
    console.log('API URL:', process.env.VUE_APP_API_URL);
    console.log('Debug Mode:', process.env.VUE_APP_DEBUG);
  }
};

注意：

process.env 是一个全局对象，可以直接访问。
所有的环境变量都会被转换为字符串类型。如果你的环境变量是数字或布尔值，需要手动转换。
只有以 VUE_APP_ 开头的变量才能被访问。

第三幕：模式 (Mode) 的威力

模式是 Vue CLI 预设的一组配置，它会影响你的构建过程。Vue CLI 默认提供了三种模式：

development：用于开发环境，会开启热更新、source map 等特性。
production：用于生产环境，会对代码进行压缩、优化。
test：用于测试环境，通常用于运行单元测试。

指定模式

你可以通过 --mode 选项来指定使用的模式。例如，在 package.json 文件中，你可以这样定义构建命令：
```
{
  "scripts": {
    "serve": "vue-cli-service serve --mode development",
    "build": "vue-cli-service build --mode production",
    "test:unit": "vue-cli-service test:unit --mode test"
  }
}
```
这样，当你运行 npm run serve 时，Vue CLI 就会以 development 模式启动开发服务器；当你运行 npm run build 时，Vue CLI 就会以 production 模式构建你的应用。
模式与环境变量的联动

Vue CLI 会根据你指定的模式，自动加载对应的 .env 文件。例如，如果你指定了 development 模式，Vue CLI 会依次加载以下文件：
- .env.development.local
- .env.local
- .env.development
- .env
这样，你就可以根据不同的模式，使用不同的环境变量，从而实现构建的差异化。
自定义模式

如果你觉得默认的模式不够用，可以自定义模式。比如，你想创建一个 staging 模式，用于预发布环境。

首先，在 package.json 文件中添加一个新的构建命令：

{
  "scripts": {
    "build:staging": "vue-cli-service build --mode staging"
  }
}

然后，创建一个 .env.staging 文件，存放预发布环境的配置信息：

VUE_APP_API_URL=https://staging.my-awesome-app.com/api
VUE_APP_DEBUG=false

现在，当你运行 npm run build:staging 时，Vue CLI 就会以 staging 模式构建你的应用，并加载 .env.staging 文件中的配置信息。

第四幕：vue.config.js 的高级玩法

vue.config.js 是 Vue CLI 的配置文件，你可以在这里对构建过程进行更细粒度的控制。

chainWebpack

chainWebpack 允许你使用 webpack-chain 这个库来修改 webpack 的配置。你可以添加、删除或修改 webpack 的 loader、plugin 等。

// vue.config.js
module.exports = {
  chainWebpack: config => {
    // 修改 webpack 的 entry
    config.entry('app').clear().add('./src/main.js');

    // 添加一个自定义的 loader
    config.module
      .rule('my-loader')
      .test(/.my$/)
      .use('my-loader')
        .loader('path/to/my-loader');

    // 添加一个自定义的 plugin
    config
      .plugin('my-plugin')
      .use(require('path/to/my-plugin'));
  }
};

chainWebpack 提供了一个非常灵活的方式来定制你的构建过程。

configureWebpack

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

// vue.config.js
module.exports = {
  configureWebpack: {
    // 直接修改 webpack 的配置对象
    plugins: [
      new require('path/to/my-plugin')()
    ]
  }
};

// 或者，返回一个函数
module.exports = {
  configureWebpack: config => {
    // 修改 webpack 的配置对象
    config.plugins.push(new require('path/to/my-plugin')());
  }
};

configureWebpack 比 chainWebpack 更直接，但灵活性稍差。

根据模式进行配置

你可以在 vue.config.js 中根据不同的模式，应用不同的配置。

// vue.config.js
module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 生产环境的配置
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true; // 移除 console.log
    } else {
      // 开发环境的配置
    }
  }
};

注意：

process.env.NODE_ENV 是一个由 Vue CLI 自动设置的环境变量，它表示当前的模式。
在 vue.config.js 中，你可以访问所有的环境变量，包括你在 .env 文件中定义的变量。

第五幕：实战演练——构建不同环境的 API 地址

假设你的应用需要连接不同的 API 服务器，开发环境使用本地服务器，生产环境使用线上服务器。

定义环境变量

在 .env.development 文件中：

VUE_APP_API_URL=http://localhost:8080/api

在 .env.production 文件中：

VUE_APP_API_URL=https://my-awesome-app.com/api

在代码中使用环境变量

// api.js
import axios from 'axios';

const api = axios.create({
  baseURL: process.env.VUE_APP_API_URL
});

export default api;

构建应用

运行 npm run serve，你的应用将连接到本地的 API 服务器。

运行 npm run build，你的应用将连接到线上的 API 服务器。

就是这么简单！

总结：掌握环境变量和模式，成为配置大师

通过 .env 文件和模式，Vue CLI 提供了一种非常灵活的方式来管理不同环境的配置。掌握了这些技巧，你就可以轻松地构建出适应各种环境的应用，让你的项目在不同的舞台上都能闪耀光芒。

表格总结

特性	描述	适用场景
`.env` 文件	用于存储环境变量，键名必须以 `VUE_APP_` 开头。	存储 API 地址、应用标题等配置信息。
模式 (Mode)	Vue CLI 预设的一组配置，会影响构建过程。默认有 `development`、`production`、`test` 三种模式，可以自定义。	区分开发、生产、测试等不同环境的构建配置。
优先级规则	如果多个 `.env` 文件中定义了同一个变量，Vue CLI 会按照 `.env.[mode].local` > `.env.local` > `.env.[mode]` > `.env` 的顺序加载。	覆盖本地配置、存放敏感信息。
`vue.config.js`	Vue CLI 的配置文件，可以修改 webpack 的配置，根据模式应用不同的配置。	定制构建过程，添加自定义 loader、plugin，优化构建性能。

常见问题解答

为什么我修改了 .env 文件，但是代码中读取到的值没有更新？
- 重启开发服务器。Vue CLI 在启动时会加载 .env 文件，所以你需要重启服务器才能让新的配置生效。
- 检查你的 .env 文件是否正确命名，以及键名是否以 VUE_APP_ 开头。
我可以在 .env 文件中存放敏感信息吗？
- 不建议直接在 .env 文件中存放敏感信息，因为这些文件可能会被提交到代码仓库。
- 更好的做法是使用 .env.local 文件存放敏感信息，并将其添加到 .gitignore 文件中，防止被提交到代码仓库。
- 或者使用更安全的方案，比如使用 Vault、Secrets Manager 等工具来管理敏感信息。
如何在 CI/CD 环境中使用环境变量？
- 在 CI/CD 管道中，你可以将环境变量设置为系统环境变量，Vue CLI 会自动读取这些变量。
- 或者，你可以创建一个临时的 .env 文件，并将环境变量写入该文件，然后在构建过程中使用该文件。

好了，今天的讲座就到这里。希望大家能够掌握 Vue CLI 的环境变量和模式，让你的项目更加灵活、可维护。咱们下期再见！

发表回复 取消回复

发表回复取消回复