typescript项目中vite静态资源路径错误本质是ts类型系统、vite构建逻辑与路径解析未对齐：ts需通过.d.ts声明识别.png等模块，vite负责实际路径处理，二者必须协同；常见报错如“cannot find module”需补充assets.d.ts类型声明并确保tsconfig包含该文件，动态src需用import或public目录+绝对路径，new url()必须传import.meta.url且用相对路径，base配置须匹配部署路径。
TypeScript 项目中 Vite 处理静态资源路径时，常见错误不是 TypeScript 本身的问题，而是构建逻辑、路径解析和类型系统三者没对齐导致的。核心在于：TS 编译器不参与资源路径处理，Vite 才真正决定资源怎么打包、怎么引用；但 TS 若不声明类型，又会报“找不到模块”——两者职责不同，却必须协同。
静态资源导入时报“Cannot find module”
这是最典型的 TS 类型报错，本质是 TS 不认识 .png、.svg 这类文件为合法模块。
- 在
src/types/assets.d.ts中补充类型声明，例如：declare module '*.png' { const src: string; export default src; } - 确保该文件被 TS 加载：检查
tsconfig.json的"include"是否包含src/types/**/*.d.ts - 重启 TS 语言服务（VS Code 中可执行 “Restart TS Server”），避免缓存干扰
动态 src 绑定图片路径失效（如 :src="imgPath"）
Vite 只在编译期处理静态 import，对运行时拼接的字符串路径无感知，打包后路径就断了。
- 少量图片：直接
import logoUrl from '@/assets/logo.png'，再绑定到变量 - 大量图标/状态图：统一放
public/目录下，用绝对路径引用，如:src="'/icons/' + status + '.png'"（注意省略public前缀） - 需遍历加载时：用
import.meta.glob预加载，例如const icons = import.meta.glob('/public/icons/*.png', { eager: true })
new URL('./xxx.png', import.meta.url) 在生产环境路径错乱
开发时路径基于源码结构，生产时资源被重命名并扁平化，相对路径计算基准变了。
- 必须始终传入
import.meta.url作为第二参数，不能写死'file://'或省略 - 路径必须是相对路径（以
./或../开头），不能用别名（如@/assets/） - 推荐写法：
const imgUrl = new URL('./logo.png', import.meta.url).href
构建后 /assets/xxx.js 404，但本地正常
这不是资源没生成，而是浏览器请求路径与实际部署位置不匹配。
- 检查
vite.config.ts中base配置：若部署在子目录（如https://site.com/myapp/），应设为base: '/myapp/' - 若不确定部署路径，设为
base: './'（相对路径），所有资源按 HTML 当前位置解析 - 确认服务器静态托管目录是否与
dist结构一致，尤其注意 Nginx 或 Express 是否配置了正确的root或static路径
