vue 3 第三十六章：vite环境变量（.env文件的配置及使用）

在Vue 3项目中，使用Vite作为构建工具时，可以通过环境变量文件（.env 文件）来配置不同环境下的环境变量。

1. 创建环境变量文件

在Vue 3项目的根目录下，你可以创建多个.env文件来设置不同环境下的环境变量。

• .env：通用环境变量，所有模式共享。
• .env.local：不会被git提交，在本地特定的自定义变量。
• .env.development：开发环境下的变量。
• .env.production：生产环境下的变量。

.env文件使用VITE_前缀来区分Vite特有的环境变量。例如：

# .env
VITE_API_URL=https://api.example.com
VITE_SOME_KEY=1234

# .env.development
VITE_API_URL=https://dev.api.example.com

# .env.production
VITE_API_URL=https://prod.api.example.com

2. 在Vue 3应用中使用环境变量

在Vue 3应用中，你可以使用import.meta.env对象来访问环境变量。例如：

// 在Vue组件或者其他JS代码中
console.log(import.meta.env.VITE_API_URL); // 输出：https://api.example.com
console.log(import.meta.env.VITE_SOME_KEY); // 输出：1234

3. 在不同模式下使用环境变量

当你运行开发服务器或构建项目时，Vite会根据当前模式（development或production）自动加载相应的.env文件。

# 开发环境
npm run dev
 
# 生产环境构建
npm run build

请确保不要在源代码中硬编码这些环境变量的值，以保持代码的可移植性和可维护性。