Vite 项目中配置多环境文件以及使用方式

从环境文件创建到最终使用，完整演示 Vite 多环境配置。一、环境文件创建与说明在项目根目录（与package.json同级）创建以下文件：.env（全局默认，所有环境都会加载）# VITE_ 前缀的变量会被暴露给客户端代码（import.meta.env 可访问） VITE_APP_TITLE=我的应用 VITE_API_TIMEOUT=5000 # 不带 VITE_ 前缀的变量仅在 Node.js 环境（如 vite.config.js）中可用，不会暴露给浏览器 API_SECRET_KEY=only_for_server_side.env.development（开发环境，vite命令时加载）VITE_APP_TITLE=我的应用(开发版) VITE_API_BASE_URL=http://localhost:3000/api VITE_ENABLE_MOCK=true.env.staging（预发布环境，vite --mode staging时加载）VITE_APP_TITLE=我的应用(预发布) VITE_API_BASE_URL=https://staging-api.example.com VITE_ENABLE_MOCK=false.env.production（生产环境，vite build时加载）VITE_APP_TITLE=我的应用 VITE_API_BASE_URL=https://api.example.com VITE_ENABLE_MOCK=false.env.local（本地私有覆盖，建议加入 .gitignore）# 本地开发时覆盖其他文件中的同名变量，不会被提交到 Git VITE_API_BASE_URL=http://192.168.1.100:3000加载优先级（从高到低）：.env.[mode].local→.env.[mode]→.env.local→.env。同名变量会被后加载的覆盖。二、package.json 脚本配置{"scripts":{// 开发环境：加载 .env.development"dev":"vite --mode development",// 预发布环境开发：加载 .env.staging"dev:staging":"vite --mode staging",// 生产环境构建：加载 .env.production"build":"vite build --mode production",// 预发布环境构建：加载 .env.staging"build:staging":"vite build --mode staging",// 本地预览构建产物"preview":"vite preview"}}--mode参数决定了 Vite 加载哪个.env.[mode]文件。不指定时，vite默认development，vite build默认production。三、vite.config.js 详细配置（逐行说明）// 第1行：从 Vite 核心模块导入 defineConfig（用于类型推导）和 loadEnv（用于加载环境变量）import{defineConfig,loadEnv}from'vite';// 第3行：导入 Node.js 的 path 模块，用于处理路径importpathfrom'path';// 第5行：导入 Vue 插件（如果是 Vue 项目）importvuefrom'@vitejs/plugin-vue';// 第8行：defineConfig 接收一个函数，函数参数是一个包含 mode（当前模式）等属性的对象exportdefaultdefineConfig(({mode})={// 第10行：loadEnv 方法加载环境变量// 参数1：mode - 当前模式（如 'development'、'staging'、'production'）// 参数2：process.cwd() - 环境文件所在的目录（项目根目录）// 参数3：'' - 前缀过滤器，空字符串表示加载所有变量（包括不带 VITE_ 前缀的）// 如果写 'VITE_'，则只加载以 VITE_ 开头的变量constenv=