Vite 不直接提供基于文件的路由预编译功能，其默认按需编译；所谓预编译实为构建阶段扫描 src/routes 或 src/pages 目录，通过 vite-plugin-pages 等插件生成路由配置并配合多入口或 SSG 插件输出静态 HTML 产物。
Vite 本身不直接提供基于文件的路由预编译功能，它默认采用按需编译（on-demand compilation），即只在浏览器请求某个模块时才动态编译并返回。所谓“基于文件的路由预编译”，实际是指在构建阶段（build）提前生成对应路由的静态产物（如 HTML + JS bundle），配合文件系统路由约定（如 src/pages/ 或 src/routes/），实现类似 Next.js 或 Nuxt 的自动路由生成与预渲染能力。
利用 Vite 插件实现路由文件扫描与预构建
核心思路是：在构建前扫描指定目录（如 src/routes）下的文件结构，自动生成路由配置，并触发对应页面的预编译（即让 Vite 在 build 阶段包含这些页面入口）。常用做法是结合 vite-plugin-pages 或自定义插件：
- 安装插件：
npm install vite-plugin-pages -D - 在
vite.config.ts中启用，它会自动将src/pages/**/*.{vue,ts,jsx,tsx}映射为路由，并生成routes.ts（可选） - 插件本身不强制预编译所有路由，但配合
build.rollupOptions.input可显式指定多个入口，触发 Vite 对每个页面生成独立 chunk
手动配置多入口 + 预生成 HTML（SSG 场景）
若目标是静态站点生成（SSG），需让 Vite 构建时为每个路由生成对应的 HTML 文件。这时可借助 vite-plugin-ssg 或自定义逻辑：
- 通过插件读取路由配置（如从
src/routes/index.ts导出的数组），遍历每个路径 - 为每个路由创建虚拟 HTML 入口（如
/about/index.html），并在构建中注入对应页面组件和路由参数 - 最终输出目录结构如
dist/about/index.html、dist/blog/post-1/index.html，实现真正的“文件即路由”预编译产物
配合前端框架（如 Vue Router / React Router）做约定式路由
Vite 不绑定任何路由方案，但可通过约定提升开发体验：
立即学习“Java免费学习笔记（深入）”；
- Vue 场景下，
vite-plugin-pages+vite-plugin-vue-layouts可根据src/pages目录结构自动生成createRouter({ routes })所需配置 - React 场景下，
@tanstack/react-router-generator或vite-plugin-react-pages支持从文件路径推导路由定义，并在 dev 时热更新，在 build 时纳入打包依赖 - 关键点在于：所有被识别为路由的文件，必须在构建图谱中被引用（哪怕只是 import.meta.glob），否则 Vite 的 tree-shaking 会剔除它们
注意：Vite 的“预编译”本质仍是构建时打包
需要明确的是，Vite 没有运行时预编译机制。所谓“预编译路由”，实质是在 vite build 过程中，把所有匹配路由规则的文件作为 entry 或 dynamic import 被纳入 rollup 输入图谱，最终输出对应的 JS/HTML 资源。它不是服务端实时编译，也不依赖 Node.js 运行时解析；而是静态构建阶段的路径映射 + 打包调度。
