vite默认使用绝对路径（如/assets/index.js）导致子目录部署404，必须在vite.config.js中显式配置base为对应子路径（如'/my-app/'），确保构建后所有资源引用均带该前缀，且public资源须用根路径引用。
Vite 默认构建时会使用以 / 开头的绝对路径（如 /assets/index.js），这在部署到域名根目录时没有问题，但一旦部署到子目录（比如 https://example.com/my-app/），浏览器就会错误地去请求 https://example.com/assets/index.js，而不是 https://example.com/my-app/assets/index.js，导致 404。
明确设置 base 为子目录路径
这是最直接、最可靠的配置方式。修改 vite.config.js：
- 如果部署在
https://example.com/docs/，就设base: '/docs/' - 如果部署在
https://example.com/my-project/v2/，就设base: '/my-project/v2/' - 注意末尾必须带斜杠，否则资源路径会拼接错误
配置后，Vite 构建时所有 HTML 中的 script、link 标签，以及 JS/CSS 中自动解析的资源 URL（如 import imgUrl from './logo.png'）都会基于该 base 生成，例如变成 /docs/assets/logo.abc123.png。
public 目录中的资源必须用根绝对路径引用
public/ 下的文件（如 public/favicon.ico、public/logo.svg）不会被构建处理，而是原样复制到 dist/ 根目录。因此在代码中引用它们时：
- ✅ 正确写法：
<link rel="icon" href="/favicon.ico">或fetch('/logo.svg') - ❌ 错误写法：
./favicon.ico、../public/favicon.ico、/public/favicon.ico（打包后路径不存在）
无论 base 怎么配，public 资源始终通过网站根路径访问，所以它的引用路径和 base 值无关，但必须与最终部署的完整 URL 路径对齐。
避免混淆：src 中资源不要用 / 开头的“伪绝对路径”
有人习惯在 src/ 中写 import img from '/src/assets/logo.png'，这种写法在开发时能工作（Vite 会特殊解析），但构建时不会被重写，容易出错。
- ✅ 推荐统一用相对路径：
import img from './assets/logo.png' - ✅ 或配置别名后用
@：import img from '@/assets/logo.png'（需在resolve.alias中定义） - ❌ 避免
/src/...这类路径 —— 它不是真正的公共绝对路径，也不受base控制
验证是否生效
构建完成后（vite build），打开 dist/index.html 检查：
- script 和 link 标签的
src/href是否都带上了你设定的 base 前缀（如/docs/assets/index.js） - 打开浏览器开发者工具 → Network 面板，刷新页面，确认所有 JS/CSS/图片请求的 URL 是预期的子路径
- 如果仍有 404，重点检查
public引用是否写错，或 Nginx/Apache 是否未正确配置子目录路由（如 history 模式需 fallback）
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
