使用配置文件
简单配置
- 配置 vite，修改环境加载路径
ts
// vite.config.ts
export default defineConfig({
...
envDir: 'config'
})// vite.config.ts
export default defineConfig({
...
envDir: 'config'
})- 添加配置文件
创建文件夹 config，写入三个 env 文件：
env
# .env 任何环境都会加载
# 客户端变量，以 VITE_ 为前缀，会被客户端加载，不要存放敏感信息
# VITE_APP_TITLE=Vite App
# 其他变量# .env 任何环境都会加载
# 客户端变量，以 VITE_ 为前缀，会被客户端加载，不要存放敏感信息
# VITE_APP_TITLE=Vite App
# 其他变量env
# .env.development 只在开发环境加载
# 客户端变量，以 VITE_ 为前缀，会被客户端加载，不要存放敏感信息
# VITE_ENV_NAME=development
# 其他变量# .env.development 只在开发环境加载
# 客户端变量，以 VITE_ 为前缀，会被客户端加载，不要存放敏感信息
# VITE_ENV_NAME=development
# 其他变量env
# .env.production 只在生产环境加载
# 客户端变量，以 VITE_ 为前缀，会被客户端加载，不要存放敏感信息
# VITE_ENV_NAME=production
# 其他变量# .env.production 只在生产环境加载
# 客户端变量，以 VITE_ 为前缀，会被客户端加载，不要存放敏感信息
# VITE_ENV_NAME=production
# 其他变量项目中使用
- 获取环境：
import.meta.env.MODE - 判断生产环境：
import.meta.env.PROD - 判断开发环境：
import.meta.env.DEV
- 判断生产环境：
- 获取变量 ABC：
import.meta.env.VITE_ABC