vue3 public下引入图片路径打包后线上不显示问题解决

一、问题

<img :src="'/public/lonold/8838ab7312c9689535d7acdd2a28007.png'" alt="图片" />

二、解决

需要使用 /lonold/8838ab7312c9689535d7acdd2a28007.png 作为路径，删除public即可

三、原因

在 Vue 项目中：

• public/ 目录的文件 不会被 Webpack/Vite 进行打包或优化 ，它们会直接复制 到 dist/ 目录中，保持原样。

• 这意味着 public 目录中的图片 不会 被 Webpack 转换为模块化资源，也不会有哈希值处理。

当你打包项目时：

• public/lonold/8838ab7312c9689535d7acdd2a28007.png 会被直接放到 dist/lonold/8838ab7312c9689535d7acdd2a28007.png，不会放在 dist/public/。