vite动态导入报错的根本原因是其基于es模块静态分析，无法解析含变量的路径；正确解法是用import.meta.glob配合字面量路径（如('@/views/*/.vue')），并确保@别名在vite.config.ts和tsconfig.json中同步配置完整。
Vite 对动态导入路径有严格限制，开发时看似正常、打包后报错（如 Failed to fetch dynamically imported module 或 Dynamic require is not supported），根本原因是它基于 ES 模块静态分析机制，无法在构建阶段解析含变量的路径表达式。解决的关键不是绕过规则，而是适配它的设计逻辑。
用 import.meta.glob 替代变量拼接路径
Vite 原生支持 import.meta.glob，这是专为动态路由、多语言组件、插件系统等场景设计的方案。它要求路径必须是字面量（不能含变量），但能提前在构建时扫描并生成可预测的模块映射表。
- ✅ 正确写法：使用绝对路径或别名路径，配合通配符
const modules = import.meta.glob('@/views/**/index.vue')
- ❌ 错误写法：路径中含变量或表达式
const path = `@/views/${name}/index.vue`; import(path)
- 实际使用时，先匹配路由路径，再从
modules对象中取对应导入函数
routes.map(r => ({ ...r, component: modules[r.componentPath] }))
确保路径别名 @ 配置完整且同步生效
即使用了 import.meta.glob('@/...')，如果 @ 别名未正确配置或 TypeScript 未识别，仍会报“模块找不到”。Vite 的 resolve.alias 和 TS 的 tsconfig.json 必须协同配置。
-
vite.config.ts 中需用
path.resolve(__dirname, 'src')映射@，不能用相对路径 - tsconfig.json 中要同时设置
"baseUrl": "./"和"paths": { "@/*": ["src/*"] } - 若项目含 Vue SFC，还需确认
@vitejs/plugin-vue已启用，否则 SFC 内的@/xxx导入可能不被解析
区分 assets 与 public 下的资源处理方式
图片、字体等静态资源若需动态加载（如根据用户角色切换图标），不能直接拼接字符串路径，而要按资源类型选择策略：
- 放在
public目录：路径固定为/xxx.png，可直接用字符串拼接，部署时无需额外处理 - 放在
src/assets：必须用new URL('./xxx.png', import.meta.url).href，Vite 才能在构建时注入哈希并返回正确 URL - 批量管理图标等资源：可用
import.meta.globEager('@/assets/icons/*.svg')预加载所有 SVG，避免运行时 404
慎用 @vite-ignore 注释
虽然加 /* @vite-ignore */ 能压制警告，但只是掩盖问题——Vite 仍无法分析该路径，打包后大概率 404。它只适合极少数明确知道路径结构、且能接受手动维护映射关系的场景（如对接遗留 CMS 模板）。
- 不推荐用于路由组件、业务页面、通用工具模块
- 若必须用，应配合 Nginx 或 CDN 配置 fallback，确保未命中 JS 文件时返回
index.html（防止 SPA 路由刷新 404）
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
