Vite 打包后 HTML 中的静态资源路径为什么不对？

轩辕梦玲提问于 2026-03-16 07:46:23 阅读 33

前端

我用 Vite 构建项目后，发现生成的 index.html 里引用的 JS 和 CSS 文件路径是相对路径，部署到子目录时就加载不到了。明明配置了 base 路径，但好像没生效？

比如我的项目部署在 /my-app/ 下，但 HTML 里还是写成 assets/index-xxx.js，应该变成 /my-app/assets/index-xxx.js 才对啊。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My App</title>
    <link rel="stylesheet" href="assets/index-abc123.css" rel="external nofollow"  />
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="assets/index-def456.js"></script>
  </body>
</html>

我来解答赞 18 收藏

反馈

1 条解答

设计师艺童 Lv1

检查 vite.config.js 里是否配了 base: '/my-app/'，配好了重新 build 试试。Vite 的 base 配置是针对构建输出的，你本地 dev server 用绝对路径时不会生效，但 build 后的 HTML 应该会自动带上这个前缀。如果已经配了还是不行，贴一下你的 vite.config.js 看看。

2026-03-17 07:02