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

bug总结2025-03-14 12:09

一、问题

javascript 复制代码

<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/。