Vue2 与 Vue3 中环境变量配置的差异详解。

---

前言

在前端开发中，环境变量是管理不同环境（如开发、测试、生产）下配置的一种常见方法。通过环境变量，我们可以轻松地在不同环境中切换配置，而无需修改代码。本文将详细介绍 Vue2 和 Vue3 中环境变量配置的不同之处。

一、Vue2 中的环境变量配置

1. 创建环境变量文件

在 Vue2 项目中，我们通常会在项目根目录下创建多个环境变量文件，如 .env.development（开发环境）、.env.production（生产环境）等。这些文件与 package.json 目录同级。

2. 编写环境变量

在环境变量文件中，我们需要以 VUE_APP_ 为前缀来定义变量，以避免与系统变量冲突。例如：

	# .env.developmentVUE_APP_MODE=developmentVUE_APP_BASE_URL=https://dev.example.com/api# .env.productionVUE_APP_MODE=productionVUE_APP_BASE_URL=https://prod.example.com/api

3. 在代码中使用环境变量

在 Vue2 项目中，我们可以通过 process.env 对象来访问环境变量。例如：

	// 在组件或JS文件中const apiUrl = process.env.VUE_APP_BASE_URL;console.log(apiUrl); // 输出当前环境下的API URL

4. 配置 package.json

在 package.json 中，我们需要为不同的环境配置不同的运行命令，并指定 --mode 参数来加载对应的环境变量文件。例如：

	{"scripts": {"serve": "vue-cli-service serve --mode development","build": "vue-cli-service build --mode production"}}

二、Vue3 中的环境变量配置

1. 创建环境变量文件

与 Vue2 类似，Vue3 项目中也会在项目根目录下创建多个环境变量文件，如 .env.development、.env.production 等。不过，在 Vue3 中，如果我们使用 Vite 作为构建工具，环境变量的前缀需要变为 VITE_（对于 Vite 构建的项目）。

2. 编写环境变量

在 Vue3 项目中，环境变量的编写方式与 Vue2 类似，但前缀有所不同。例如：

	# .env.developmentVITE_APP_MODE=developmentVITE_APP_BASE_URL=https://dev.example.com/api# .env.productionVITE_APP_MODE=productionVITE_APP_BASE_URL=https://prod.example.com/api

3. 在代码中使用环境变量

在 Vue3 项目中，我们可以通过 import.meta.env 对象来访问环境变量。例如：

	// 在组件或JS文件中const apiUrl = import.meta.env.VITE_APP_BASE_URL;console.log(apiUrl); // 输出当前环境下的API URL

4. 配置 package.json 和 Vite

在 Vue3 项目中，如果我们使用 Vite 作为构建工具，配置方式与 Vue2 有所不同。我们需要在 vite.config.ts 中配置环境变量（如果需要），并在 package.json 中配置运行命令。不过，对于简单的环境变量加载，Vite 会自动处理，无需额外配置。

	{"scripts": {"dev": "vite --mode development","build": "vite build --mode production"}}

三、总结

Vue2 和 Vue3 在环境变量配置上的主要差异在于：

1. 环境变量前缀：Vue2 使用 VUE_APP_ 作为前缀，而 Vue3（使用 Vite 时）使用 VITE_APP_ 作为前缀。
2. 访问环境变量的方式：Vue2 通过 process.env 访问，而 Vue3 通过 import.meta.env 访问。
3. 构建工具：Vue2 通常使用 webpack，而 Vue3 更倾向于使用 Vite，这可能导致在配置上的细微差异。

无论是 Vue2 还是 Vue3，合理使用环境变量都可以使我们的项目更具灵活性和可维护性。希望本文能帮助你更好地理解 Vue2 和 Vue3 中环境变量配置的不同之处。