这是一个很实用的场景!你的项目如果需要同时部署到多个不同的域名,比如:
并且每个域名下都在根路径,那么 Vite 的 base 配置其实可以直接用默认值('/'),或者不配置 base,这样打包出来的静态资源路径就是相对根目录的绝对路径,不依赖具体域名。
🎯 常见场景分析
1. 每个域名下都是根路径(常见)
比如:
📝 配置
vite.config.js:
export default {
base: '/',
}
或者直接不写 base,用默认值即可。
🚩 这样访问时,静态资源路径会是 /assets/xxx.js,不会带域名,适合部署到不同域名的根目录。
2. 不同域名下的子路径(不常见,但也有)
比如:
📝 配置
vite.config.js:
export default {
base: '/app/',
}
这样静态资源路径会是 /app/assets/xxx.js。
3. 同一份代码,不同根路径部署(比如 /a/、/b/)
比如:
📝 配置
这种情况下,打包的时候需要指定不同的 base,可以用环境变量区分:
// vite.config.js
export default {
base: process.env.VITE_BASE_PATH || '/',
}
打包时指定:
VITE_BASE_PATH=/a/ vite build
VITE_BASE_PATH=/b/ vite build
⚠️ 注意事项
- 不要写成带域名的 base(如
base: 'https://a.example.com/'),这样打包后只能在一个域名下访问。 - 如果用 CDN,可以配置 base 为 CDN 路径(如
base: 'https://cdn.example.com/')。
✅ 总结
- 多域名部署,且都在根目录,
base: '/'即可 - 多子路径部署,用环境变量动态设置 base
- 不要将域名写死到 base 里!
💡 提示
- 如果你有多套环境(测试、预发、生产),可以用 Vite 的 环境变量 和多配置文件来灵活切 base。