VitePress项目中使用环境变量的正确方法

在VitePress项目中正确使用环境变量是开发过程中一个常见需求，特别是在需要根据不同环境配置不同请求地址时。本文将详细介绍如何在VitePress中配置和使用环境变量。

环境变量文件位置

VitePress项目与传统Vite项目在环境变量配置上有一个重要区别：环境变量文件(.env)必须放置在docs目录下，而不是项目根目录。这是许多开发者容易忽略的关键点。

环境变量类型

VitePress支持以下几种环境变量文件：

1. .env - 在所有环境中加载
2. .env.local - 在所有环境中加载，但会被git忽略
3. .env.[mode] - 只在指定模式下加载
4. .env.[mode].local - 只在指定模式下加载，但会被git忽略

使用方式

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

const baseUrl = import.meta.env.BASE_URL;

变量命名规范

1. 只有以VITE_开头的变量才会被Vite静态替换
2. 变量名应使用大写字母和下划线
3. 敏感信息不应直接暴露在客户端代码中

模式配置

VitePress默认支持以下模式：

• development - 开发模式
• production - 生产模式

可以通过创建不同的环境变量文件来为不同模式配置不同变量，例如：

• .env.development - 开发环境专用变量
• .env.production - 生产环境专用变量

实际应用示例

假设我们需要为不同环境配置不同的API基础地址：

1. 在docs/.env.development中：

VITE_API_BASE_URL=http://localhost:3000/api

2. 在docs/.env.production中：

VITE_API_BASE_URL=https://api.example.com

3. 在组件中使用：

const apiUrl = import.meta.env.VITE_API_BASE_URL;

注意事项

1. 环境变量文件修改后需要重启开发服务器才能生效
2. 生产环境构建时会根据当前模式自动加载对应的环境变量
3. 不要在客户端代码中暴露敏感信息，如API密钥等

通过以上方法，开发者可以轻松地在VitePress项目中管理不同环境下的配置变量，实现开发和生产环境的无缝切换。