Vite - public目录的图片也会被处理？(public目录的特点)

1，问题描述

复现步骤：

项目为 vite@5.0.8 创建的 Vue3 + TS 项目。

将图片（10kb）放到了 public 目录下，并通过下面的方式使用：

<img src="/public/icon/approve.png" />

或

.bg {
    background-image: url('/public/icon/approve.png');
}

vite.config.ts 相关配置：

export default defineConfig({
	build: {
	    assetsInlineLimit: 4096, // 默认配置 4096 = 4kb
		rollupOptions: {
			output: {
				assetFileNames: `assets/[name]-[hash][extname]`,
			},
		}
	},
})

打包结果：

dist
	-- assets
		xxx.css
		xxx.js
		approve-ErVkmS52.png
	-- icon
		approve.png

可以看到，public 目录中的图片，虽然直接被复制到打包目录 dist 中（符合预期），但也被 vite 识别到并打包处理了。

而如果将 build.assetsInlineLimit 改为 40960，则打包结果：

dist
	-- assets
		xxx.css
		xxx.js
	-- icon
		approve.png

可以看到 public 目录中的图片同时被内联处理了。

2，解决

查阅 官方文档-public 后发现，使用 public 目录中的资源时，应该直接使用绝对路径。

<img src="/public/icon/approve.png" />

.bg {
    background-image: url('/public/icon/approve.png');
}

替换为

<img src="/icon/approve.png" />

.bg {
    background-image: url('/icon/approve.png');
}

这样问题就解决了。

3，问题分析

3.1，public 目录特点

• 用于存放那些不需要经过 Vite 的模块处理流程的静态资源（图片，字体等）；
• 在打包时会被完整复制到打包目录下；
• 该目录中的资源在开发时能直接通过 / 根路径访问到。

这个特性，是通过配置项 publicDir 赋予的，它的默认值是 public。如果将它修改为 static，那公共目录就被改为static 目录，public 目录就失效了。

export default defineConfig({
    publicDir: 'static',
    // ...
});

3.2，原因

猜测在 Vite 默认配置下，如果引用图片的方式，如果以 /publicDir 开头而不是 / 开头的话，Vite 会将这些资源视为模块依赖，而不是静态资源。

所以，还是按照官方文档建议的方式，用 / 开头来使用 public 目录的资源。

---

另外，其实也能看到，在访问对应的图片时，控制台是有警告的：

---

以上。