在 Vue 3 中，怎么管理环境变量
在 Vue 3 中，环境变量管理是通过 .env 文件来进行的，利用这些文件可以让开发者根据不同的环境（开发、生产、测试等）配置不同的变量。这一机制由 Vite 构建工具支持，它帮助开发者根据不同的环境需求做出相应配置。
1. 环境变量的基本概念
在前端开发中，环境变量通常用于存储配置信息、密钥、API 地址等，这些信息可能会因不同的部署环境而有所不同。通过 .env 文件，开发者可以确保在开发环境、生产环境等不同环境下使用不同的配置，而无需手动修改代码。
2. .env 文件的结构
2.1 文件命名规则
Vue 3 使用 Vite 作为构建工具，Vite 支持多种环境变量文件，文件的命名规则如下：
- .env: 默认的环境配置文件，会在所有环境中加载。
- .env.local: 用于本地开发的配置，不应被版本控制追踪。它的优先级高于 .env。
- .env.development: 用于开发环境的配置文件。
- .env.production: 用于生产环境的配置文件。
- .env.test: 用于测试环境的配置文件。
- .env.[mode].local: 对于特定环境的本地配置文件，优先级最高。
当你运行 vite 时，Vite 会根据不同的构建模式来加载相应的环境变量文件。
2.2 环境变量的命名规范
Vite 只会暴露以 VITE_ 为前缀的环境变量，避免泄露敏感数据。对于没有 VITE_ 前缀的环境变量，它们不会暴露到客户端代码中，从而保护服务器端的敏感信息。
例子：
正确的命名：VITE_API_URL=https://api.example.com
错误的命名（不会暴露）：API_KEY=abcdef12345
3. 设置 .env 文件
3.1 基本环境变量设置
你可以在 .env 文件中设置一些通用的环境变量，比如 API 的 URL、应用标题、版本号等。
示例 .env 文件：
VITE_API_URL=https://api.example.com
VITE_APP_TITLE=Vue App
VITE_VERSION=1.0.0
3.2 环境特定的设置
Vite 允许你根据不同的环境设置不同的变量。例如，你可以为开发环境、生产环境设置不同的 API 地址。
示例 .env.development 文件：
VITE_API_URL=http://localhost:3000
VITE_APP_TITLE=Vue Dev App
示例 .env.production 文件：
VITE_API_URL=https://prod.api.example.com
VITE_APP_TITLE=Vue Production App
4. 使用环境变量
在 Vue 3 中，你可以通过 import.meta.env 来访问这些环境变量。通过这种方式，你可以在代码中动态地使用不同环境下的配置。
在 JavaScript/TypeScript 中使用环境变量
你可以直接通过 import.meta.env 访问环境变量的值，例如：
// src/main.js
console.log(import.meta.env.VITE_API_URL); // 访问 API URL
console.log(import.meta.env.VITE_APP_TITLE); // 访问应用标题
在 Vue 组件中使用环境变量
你也可以在 Vue 单文件组件中使用环境变量。举个例子：
<template>
<div>
<h1>{{ appTitle }}</h1>
<p>{{ apiUrl }}</p>
</div>
</template>
<script setup>
const appTitle = import.meta.env.VITE_APP_TITLE;
const apiUrl = import.meta.env.VITE_API_URL;
</script>
使用条件判断环境变量
你可以通过环境变量来实现条件判断，根据不同的环境加载不同的功能：
if (import.meta.env.MODE === 'development') {
console.log('This is the development environment.');
}
5. 切换环境
Vite 允许你通过设置不同的构建模式来切换环境。你可以通过以下命令来指定使用哪种环境：
- 开发环境：运行 vite 或 npm run dev，默认使用 .env.development 或 .env。
- 生产环境：运行 vite build 或 npm run build，会使用 .env.production 或 .env。
- 测试环境：运行 vite build --mode test，它会加载 .env.test 配置。
你还可以通过命令行参数来指定特定的环境：
vite --mode production # 启动生产环境
vite --mode development # 启动开发环境
6. 优先级规则
Vite 会根据不同文件的优先级来加载 .env 文件。加载优先级从高到低如下：
- .env.local: 本地开发环境使用的配置文件，优先级最高。
- .env.[mode].local: 特定环境的本地配置文件，优先级高于 .env.[mode]。
- .env: 默认的环境配置文件，适用于所有环境。
- .env.[mode]: 特定环境的配置文件，优先级低于 .env.local 和 .env.[mode].local。
7 案例
假设我们有以下需求：
- 在 开发环境（local）使用 http://localhost:3000 作为 API 地址。
- 在 生产环境（production）使用 https://api.example.com 作为 API 地址。
- 应用标题 VITE_APP_TITLE 在不同环境下应该有所不同。
- 创建 .env 文件
首先，创建基础的 .env 文件，并设置默认的环境变量：
.env（默认环境）:
VITE_APP_TITLE=Vue Default App
VITE_API_URL=https://api.example.com
这个配置会作为默认设置，适用于没有特定环境标识时的情况。
- 创建开发环境和生产环境配置文件
接下来，为开发环境和生产环境分别创建配置文件。可以使用 .env.development 和 .env.production 来覆盖 .env 文件中的配置。
.env.development（开发环境配置）
VITE_APP_TITLE=Vue Dev App
VITE_API_URL=http://localhost:3000
.env.production（生产环境配置）
VITE_APP_TITLE=Vue Production App
VITE_API_URL=https://api.example.com
- 在 Vue 3 组件中使用环境变量
接下来，在 Vue 3 应用中使用这些环境变量。我们可以通过 import.meta.env 来读取环境变量。
src/App.vue（Vue 组件）
<template>
<div>
<h1>{{ appTitle }}</h1>
<p>API URL: {{ apiUrl }}</p>
</div>
</template>
<script setup>
const appTitle = import.meta.env.VITE_APP_TITLE;
const apiUrl = import.meta.env.VITE_API_URL;
</script>
<style scoped>
h1 {
color: #42b983;
}
</style>
在这个 Vue 组件中，我们通过 import.meta.env.VITE_APP_TITLE 和 import.meta.env.VITE_API_URL 获取并显示环境变量的值。
- 启动应用并测试
- 开发环境
当我们在开发环境中运行应用时，Vite 会加载 .env.development 文件中的变量。我们可以通过以下命令启动开发服务器：
这时，页面会显示如下内容：
Vue Dev App
API URL: http://localhost:3000
- 生产环境
在生产环境中，Vite 会加载 .env.production 文件中的变量。要进行生产环境构建并启动，可以运行以下命令：
npm run build # 构建生产环境
npm run preview # 预览生产环境
这时，页面会显示如下内容：
Vue Production App
API URL: https://api.example.com
通过 .env 文件，你可以轻松管理 Vue 3 应用中的环境配置。你可以为不同的环境（开发、生产、测试等）设置不同的变量，并通过 import.meta.env 访问这些变量。Vite 的强大之处在于它提供了灵活的配置机制，帮助开发者快速适应不同环境下的需求。在使用 .env 文件时要特别注意敏感数据的处理，避免将敏感信息暴露到前端。