🚗router history模式如何部署多个域名

342 阅读1分钟

这是一个很实用的场景!你的项目如果需要同时部署到多个不同的域名,比如:

并且每个域名下都在根路径,那么 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。