vue3+vite配置.env文件环境变量

在 Vue 3 + Vite 项目中，.env 文件用于配置环境变量，这些变量可以在项目中根据不同的环境（如开发环境、生产环境等）进行区分和使用。以下是关于 .env 文件配置的详细介绍：

1. .env 文件的作用

.env 文件用于定义环境变量，这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变量，并在构建时将它们替换为实际值。

2. 配置文件的命名规则

Vite 支持以下几种环境文件：

（1）.env：所有环境都会加载的文件。

（2）.env.development：仅在开发环境加载。

（3）.env.production：仅在生产环境加载。

（4）.env.test：仅在测试环境加载。

这些文件应该放在项目的根目录下。

3. 配置项示例

以下是一个典型的 .env 文件示例：

# .env

# Node.js 运行环境
NODE_ENV = "development"

# 应用模式
VITE_APP_MODE = "dev"

# 单页应用的基路径
VITE_APP_ROUTER_BASE = "/"

# 静态文件打包存放的目录
VITE_APP_PUBLIC_URL = "/"

# 请求地址
VITE_APP_API_BASE_URL = "http://localhost:3000"

# 是否删除 console.log
VITE_APP_PURE_CONSOLE = 0

# 是否删除 debugger
VITE_APP_DROP_DEBUGGER = 0

# 是否启用打包体积分析
VITE_APP_BUNDLE_ANALYZE = 0

4. 配置项解释

（1）NODE_ENV：指定当前的 Node.js 运行环境，常见值为 development（开发环境）、production（生产环境）和 test（测试环境）。

（2）VITE_APP_MODE：自定义的应用模式，可以根据需要设置不同的模式。

（3）VITE_APP_ROUTER_BASE：单页应用的基路径。如果应用部署在非根路径下（如 /app/），需要将此值设置为对应路径。

（4）VITE_APP_PUBLIC_URL：静态文件的基路径。确保静态资源（如图片、字体等）能够正确加载。

（5）VITE_APP_API_BASE_URL：API 请求的基准 URL。确保前端请求能够正确发送到后端服务。

（6）VITE_APP_PURE_CONSOLE：是否删除代码中的 console.log 语句。0 表示不启用，1 表示启用。

（7）VITE_APP_DROP_DEBUGGER：是否删除代码中的 debugger 语句。0 表示不启用，1 表示启用。

（8）VITE_APP_BUNDLE_ANALYZE：是否启用打包体积分析插件。0 表示不启用，1 表示启用。

5. 如何使用环境变量

在项目中可以通过 import.meta.env 来访问这些环境变量：

console.log(import.meta.env.VITE_APP_API_BASE_URL); // 输出: http://localhost:3000
console.log(import.meta.env.NODE_ENV); // 输出: development

6. 注意事项

（1）变量前缀：只有以 VITE_ 开头的变量才会被 Vite 替换并暴露给客户端代码。这是为了防止意外暴露敏感信息。

（2）敏感信息：不要在 .env 文件中存储敏感信息（如 API 密钥、数据库密码等）。这些信息应该通过更安全的方式进行管理。

（3）.gitignore：确保 .env 文件被添加到 .gitignore 中，避免将敏感信息提交到版本控制系统中。

7. 示例项目结构

project-root/
  ├── .env
  ├── .env.development
  ├── .env.production
  ├── .env.test
  ├── index.html
  ├── main.js
  ├── vite.config.js
  └── ...

8. 动态加载配置

在某些情况下，你可能需要在运行时动态加载配置。可以通过 API 请求获取配置信息，或者根据当前环境动态导入不同的配置文件：

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  base: import.meta.env.VITE_APP_ROUTER_BASE,
  // 其他配置...
});

9. CI/CD 中的环境管理

在持续集成和持续部署（CI/CD）流程中，环境变量的管理尤为重要。可以通过 CI/CD 工具（如 GitHub Actions、Jenkins 等）来设置和管理不同环境的变量，确保应用在不同阶段使用正确的配置。

总结

通过合理配置 .env 文件，可以有效管理项目中的环境变量，确保在不同环境下应用的正确运行和安全性。以下是一些关键点：

（1）使用 .env.development、.env.production 和 .env.test 文件来管理不同环境的配置。

（2）确保所有环境变量以 VITE_ 开头，以便在客户端代码中访问。

（3）不要在 .env 文件中存储敏感信息。

（4）使用 .gitignore 文件排除 .env 文件，避免敏感信息泄露。