Vitesse项目中.env环境变量的正确使用方式

在Vitesse项目中使用环境变量时，开发者常常会遇到配置不生效的问题。本文将详细介绍如何在基于Vite的Vitesse项目中正确配置和使用.env文件中的环境变量。

环境变量命名规范

在Vite构建的项目中，环境变量有一个特殊的命名规则：只有以VITE_为前缀的变量才会被Vite自动加载并暴露给客户端代码。这是Vite出于安全考虑的设计，防止意外将敏感信息暴露给前端代码。

配置步骤

1. 在项目根目录下创建.env文件
2. 在文件中定义环境变量时，必须使用VITE_前缀，例如：

   VITE_API_BASE_URL=https://api.example.com
   VITE_APP_TITLE=My Vitesse App
   

3. 保存文件后，这些变量会自动被Vite加载

在代码中使用

在Vue组件或其他JavaScript/TypeScript文件中，可以通过import.meta.env对象访问这些环境变量：

const apiBaseUrl = import.meta.env.VITE_API_BASE_URL
const appTitle = import.meta.env.VITE_APP_TITLE

注意事项

1. 非VITE_前缀的变量将不会被暴露给客户端代码，这些变量只能在Node.js环境中使用
2. 对于敏感信息，建议使用.env.local文件并确保它被添加到.gitignore中
3. 不同环境可以使用不同的.env文件，如.env.development和.env.production

环境模式

Vite支持基于模式的环境变量加载：

• development模式（开发环境）
• production模式（生产环境）
• 自定义模式（通过--mode选项指定）

在不同模式下，Vite会自动加载对应的.env文件，优先级从高到低为：

1. .env.${mode}.local
2. .env.${mode}
3. .env.local
4. .env

通过遵循这些规则，开发者可以轻松地在Vitesse项目中管理不同环境下的配置变量，实现开发和生产环境的无缝切换。