Vite 项目中静态图片需区分开发路径解析与构建压缩：开发时自动转模块 URL 并内联小图，构建时需配置 vite-plugin-imagemin 等插件实现压缩及 WebP/AVIF 生成，public 目录资源不参与构建处理。
在 Vite 项目中，静态图片的路径处理和压缩不是开箱即用的“全自动”流程，但借助其原生支持和插件生态，可以做到简洁高效。关键在于区分开发时的路径解析（由 Vite 自动处理）和构建时的优化（需手动配置压缩）。
开发阶段：图片路径自动转为模块 URL
Vite 在开发服务器中会将 .png、.jpg、.jpeg、.gif、.svg 等静态资源作为模块导入，自动解析为带哈希的绝对路径或 base64（小图），无需额外配置：
- 直接 import 图片，得到的是可直接用于
<img src>的有效 URL - 支持相对路径（如
import logo from './logo.png'）和公共目录（public/下的文件用绝对路径引用，不走构建流程） - 小于 4kb 的图片默认内联为 base64，避免小图请求开销（阈值可通过
build.assetsInlineLimit调整）
构建阶段：启用图片压缩（需插件）
Vite 本身不压缩图片，需引入第三方插件。推荐使用 vite-plugin-imagemin（基于 imagemin），支持 WebP、AVIF、压缩 PNG/JPG 等：
- 安装：
npm add -D vite-plugin-imagemin - 在
vite.config.ts中配置：
import { defineConfig } from 'vite'
import imagemin from 'vite-plugin-imagemin'
export default defineConfig({
plugins: [
imagemin({
gifsicle: { optimizationLevel: 7 },
mozjpeg: { quality: 80 },
pngquant: { quality: [0.8, 0.9] },
svgo: { plugins: [{ name: 'removeViewBox' }, { name: 'cleanupIDs' }] }
})
]
})
构建时，插件会扫描 src/ 下的图片并输出压缩后版本，同时保留原始路径语义（import 不变，文件内容已优化）。
立即学习“Java免费学习笔记（深入）”；
进阶技巧：按需生成 WebP / AVIF 格式
若需响应式图片（<picture>），Vite 不内置多格式生成，但可结合构建脚本或插件实现：
- 使用
vite-plugin-responsive-picture或自定义 Rollup 插件，在构建时为每张 PNG/JPG 生成对应 WebP - 更轻量的方式：在
public/放原始图，用import.meta.globEager批量读取并生成<sources>数据，配合组件封装 - 注意：浏览器兼容性需自行控制，例如用
<source type="image/webp">+ fallback<img>
注意事项与常见问题
避免踩坑的关键点：
-
public/目录下的图片不会被插件处理，也不参与模块解析，适合放 favicon、SEO 图等必须保持原始路径的资源 - SVG 作为模块导入时，默认是字符串（若用
?raw）或内联组件（若用?component），压缩需单独配置 svgo - 路径别名（如
@/assets）在 import 中完全可用，Vite 会正确解析 - 构建后图片文件名含 hash，确保缓存更新，无需手动处理缓存失效
