Vite将静态资源作为模块处理，通过构建时解析和运行时URL生成实现类型安全、路径可靠、可优化的资源管理；支持直接import和new URL+import.meta.url两种导入方式，分别适用于固定和动态路径场景，并需配置base和类型声明以适配部署与TS支持。
Vite 把静态资源（图片、SVG、字体、音视频等）当作模块来处理，不是简单复制粘贴，而是通过构建时解析 + 运行时 URL 生成，实现类型安全、路径可靠、可优化的资源管理。
Vite 静态资源导入的核心机制
Vite 支持两种主流方式导入静态资源，底层都依赖 ESM 模块系统和构建时静态分析能力：
- 直接
import资源路径 → 返回构建后带哈希的公共 URL 字符串 -
new URL(path, import.meta.url)→ 动态构造模块相对路径的绝对 URL
这两种方式都能被 Vite 正确识别、处理并注入哈希指纹，同时避免运行时路径错误。
立即学习“Java免费学习笔记（深入）”；
直接 import 导入（适合固定资源）
适用于组件中明确引用某张图、某个图标等场景。Vite 会自动将其转为带 hash 的生产路径：
import logo from '@/assets/logo.png' // logo 是字符串，如 "/assets/logo.abc123.png"
✅ 优点：类型安全（配合 vite/client 声明）、IDE 自动补全、支持 tree-shaking（部分资源类型）、构建时自动哈希
⚠️ 注意：不能解构命名导入（如 import { logo } from ...），因为图片不是 JS 模块，会报 ambiguous indirect export 错误
new URL + import.meta.url（适合动态路径）
当路径含变量（如 userAvatar-${id}.jpg）或需在函数内计算时，必须用此方式：
const getAvatar = (id: string) =>
new URL(`../assets/avatars/${id}.jpg`, import.meta.url).href
img.src = getAvatar('u1001') // ✅ 构建时能识别该路径并处理✅ 优点：支持模板字符串拼接（只要路径结构静态可分析）、完全模块作用域隔离、开发/生产路径一致
⚠️ 注意：不能用完全动态拼接（如 path = '../' + folder + '/' + name），否则构建阶段无法扫描依赖，资源不会被打包
public 目录资源：绕过构建，直出访问
放在 public/ 下的文件（如 public/favicon.ico）不参与构建流程，直接复制到 dist/ 根目录：
<link rel="icon" href="/favicon.ico" /> <img src="/logo.svg" />
✅ 优点：路径稳定、零构建开销、适合第三方 CDN 兼容资源或无需压缩的文件
⚠️ 注意：无哈希、无压缩、无类型提示；JS 中不可 import，只能用 /xxx 绝对路径引用
路径行为与部署适配
Vite 默认以 / 为 base，即所有资源路径从域名根开始。若部署到子路径（如 /my-app/），需配置：
// vite.config.ts
export default defineConfig({
base: './', // 相对路径，推荐用于任意部署环境
// 或 base: '/my-app/', // 明确子路径
})配置后，import 和 new URL 生成的路径都会自动适配，无需改业务代码。
类型支持别忘了
TypeScript 默认不认识图片等资源导入。需在项目中添加类型声明：
// src/vite-env.d.ts /// <reference types="vite/client" />
或在 tsconfig.json 中：
{
"compilerOptions": {
"types": ["vite/client"]
}
}这样 import xxx from '*.png' 才有正确的字符串类型推导。
不复杂但容易忽略
