PAYATHON 2026

Vite 构建只转换 53 个模块，是否遗漏了 Vue 页面？

数据小陈

结论

仅凭“转换了 53 个模块”或入口 JavaScript 约 36 KB，无法判断 43 个 Vue 页面是否进入了构建。模块数和文件大小都不能可靠地反映页面是否已打包。按给出的配置，import.meta.glob('./Pages/**/*.vue') 是 Inertia 常见的懒加载写法，通常会为匹配的文件创建动态导入。

要确认是否生成了页面 chunk，需要检查完整的构建目录和 manifest。当前日志没有列出这些文件的完整清单，因此还无法确认构建产物是否缺少页面。

先检查构建产物

构建后，检查 public/build/assets 中的所有文件，以及 public/build/manifest.json 是否包含页面条目。可以运行：

find public/build/assets -maxdepth 1 -type f -print
cat public/build/manifest.json

如果 manifest 中有 resources/js/Pages/...vue 条目，或 assets 目录中有页面相关的 JavaScript chunk，说明构建已发现并输出这些页面。chunk 文件名不一定与 Vue 文件名相同；Rollup 拆分代码时也可能合并共享代码。

如果 manifest 里只有入口和 CSS，可以继续确认 Vite 实际匹配到了哪些 glob 路径。临时在 app.ts 中打印匹配键：

const pages = import.meta.glob<DefineComponent>('./Pages/**/*.vue');
console.log(Object.keys(pages));

将 resolver 使用的 glob 改为 pages 变量后重新构建，再检查输出。如果键列表为空或缺少页面，重点检查构建时的工作目录、文件名大小写，以及文件是否位于当前 Vite 项目根目录下。Linux 文件系统区分大小写，因此 Pages 和 pages 并不相同。

懒加载和 eager 的区别

默认情况下，import.meta.glob 使用懒加载，匹配项对应动态导入函数。这适合 Inertia 按需加载页面，也支持代码拆分。resolvePageComponent 接收这类加载器，因此你当前的用法方向是合理的：

resolvePageComponent(
  `./Pages/${name}.vue`,
  import.meta.glob<DefineComponent>('./Pages/**/*.vue'),
)

添加 { eager: true } 后，glob 返回已导入的模块，而不是异步加载函数。这与 resolvePageComponent 需要的加载器类型不一致，因此会出现你看到的 TypeScript 类型错误。不要仅为了增加构建模块数而启用 eager。如果确实需要 eager 加载，就要直接使用导入后的模块，并相应调整页面解析逻辑和类型。

页面 chunk 是否应该独立

懒加载通常会让 Rollup 为动态导入生成分包，但不保证每个 .vue 文件都有独立文件。构建工具可能合并代码或共享代码，具体产物应以 manifest 和 assets 目录为准。页面即使已打包，产物也不必达到 500 KB；未使用的依赖和代码可能被移除，压缩前后的体积也会不同。

SSR 输出如何理解

npm run build:ssr 会先运行客户端构建，再运行 vite build --ssr。SSR 部分显示转换了 3 个模块，并不代表客户端构建只包含 3 个模块。请分别检查 public/build 与 bootstrap/ssr 中的产物和 manifest，并查看 bootstrap/ssr/app2.js 的导入情况。单看 SSR 日志中的模块数量，无法判断客户端构建是否遗漏了页面。

备注：内容仅供参考。