Vite多环境API地址替换需通过import.meta.env配合以VITE_开头的环境变量文件和--mode构建模式实现，.env.development/.env.test/.env.production分别对应不同环境，变量仅VITE_前缀才注入前端，JS中封装request函数统一处理URL拼接与安全校验，构建命令必须显式指定--mode。
在 Vite 构建中实现多环境 API 地址替换，核心是利用 import.meta.env + 环境变量文件 + 构建模式三者配合，而不是运行时判断或手动改代码。
确保环境变量以 VITE_ 开头并正确命名文件
Vite 只会把以 VITE_ 开头的变量注入到前端代码中。其他变量（如 API_URL 或 SECRET_KEY）不会暴露，也不会被打包进去。
在项目根目录创建对应环境的 .env 文件：
-
.env.development：开发环境（vite启动默认加载） -
.env.test：测试环境（需显式指定--mode test） -
.env.production：生产环境（vite build默认加载）
每个文件里写类似内容：
立即学习“Java免费学习笔记（深入）”；
VITE_API_BASE_URL=https://api.example.com VITE_ENV_NAME=production
注意：.env.local 和 .env.[mode].local 会被 .gitignore 自动忽略，适合放本地调试用的敏感配置。
在 JS 中安全读取和使用 API 地址
import.meta.env 只能在 JS/TS 模块中访问，不能在 HTML 或非模块脚本里直接用。
推荐封装一个统一请求函数，避免到处拼接 URL：
function request(path, options = {}) {
const url = new URL(path, import.meta.env.VITE_API_BASE_URL);
return fetch(url, {
...options,
credentials: 'include',
signal: AbortSignal.timeout(import.meta.env.VITE_API_TIMEOUT || 8000)
});
}
这样能自动处理协议、末尾斜杠、相对路径补全，也防止恶意路径注入（比如 id=123/../admin）。
构建命令要明确指定 mode
package.json 的 scripts 必须带上 --mode，否则 Vite 不会加载对应 .env.[mode] 文件：
"dev:test": "vite --mode test""build:staging": "vite build --mode staging""build:prod": "vite build --mode production"
执行 npm run dev:test 时，Vite 会按顺序加载：.env.test → .env（覆盖同名变量），同时 import.meta.env.MODE === 'test' 可用于逻辑分支。
开发阶段用代理避免跨域（可选但推荐）
开发时后端常跑在不同端口（如 localhost:3000），直接请求会跨域。可在 vite.config.ts 中配代理：
server: {
proxy: {
'^/api': {
target: import.meta.env.VITE_API_BASE_URL,
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
然后前端请求统一写 fetch('/api/users')，Vite 会自动转发，且只在开发时生效，不影响生产构建。
