Vue.js生产构建中PNG图片无法在新标签页打开的问题

问题原因 #

本地npm run dev运行正常，生产构建后点击图片打开PNG出现404，核心原因是Vite生产构建时不会自动处理未被显式引用的静态资源。你代码中fullRes的PNG路径以字符串形式赋值给a标签的href，Vite无法识别这是需要打包的资源，因此不会将PNG文件复制到dist目录，导致访问失败。而WEBP能正常显示，是因为dev模式下服务器可直接读取根目录文件，或WEBP被其他逻辑显式引用过。

解决方案 #

方法一：将静态资源移入public目录 #

Vite会把public目录下的资源原封不动复制到dist根目录，绝对路径可直接访问：

1. 在项目根目录创建public文件夹（无则新建）。
2. 将img文件夹整体移动到public下，形成public/img/art/的目录结构。
3. 无需修改代码中的路径（/img/art/xxx会直接映射到dist/img/art/xxx），重新执行npm run build即可。

方法二：显式导入PNG资源 #

通过ES模块导入PNG，让Vite识别并自动处理资源路径：
修改artDisplay.js，导入目标PNG并替换字符串路径：

// 导入PNG资源
import examplePng from '/img/art/example.png';

let artData = [
  {
    image: "/img/art/example.webp",
    fullRes: examplePng, // 使用导入后的资源路径
    artist: "Art from <a class='text-lg font-semibold text-blue-500' href='https://example.com' target='_blank'>example</a>",
    description: "Cool description",
    hoverText: "Hover text",
  }
];

// 其余代码保持不变

执行npm run build后，Vite会将PNG打包到dist/assets目录，并自动替换为正确的访问路径。

额外检查 #

• 确认vite.config.js中build.base已设置为'/'（当前配置正确），部署时需确保服务器根目录指向dist文件夹。
• 构建完成后查看dist目录：方法一会在dist/img/art/下看到PNG文件；方法二的PNG会出现在dist/assets目录中。

内容的提问来源于stack exchange，提问作者Echo