Laravel10+Vite环境下Vue组件引入图片构建报错的解决方法

开发环境中，Vite的开发服务器会直接映射项目根目录的public文件夹，所以你用绝对路径/assets/img/logo.png能直接访问到public/assets/img/logo.png下的图片。但执行npm run build时，Rollup（Vite底层的打包工具）会把这个路径当作模块导入路径来解析，而绝对路径不是合法的ES模块导入格式，因此抛出解析错误。

方法1：通过ES模块导入图片（推荐） #

在Vue组件中先导入图片资源，再通过绑定属性的方式使用：

<script setup>
// 从项目根目录开始的绝对路径，Vite会自动处理资源
import logo from '/assets/img/logo.png'
</script>

<template>
  <img class="logo-img" :src="logo" alt="站点logo">
</template>

这种方式下，Vite会在构建时对图片进行优化（比如压缩、生成哈希文件名），并正确输出到打包后的目录中。

方法2：给public目录资源添加?url后缀 #

如果图片放在public/assets/img/下，保持绝对路径的同时，添加?url后缀告诉Vite这是一个静态资源URL，而非模块导入：

<img class="logo-img" src="/assets/img/logo.png?url" alt="站点logo">

构建时Vite会保留这个路径，并将public目录下的资源复制到打包后的dist目录对应位置。

方法3：使用相对路径引用 #

根据组件所在的目录结构，使用相对路径指向图片资源（假设图片在resources/assets/img/，组件在resources/js/components/）：

<img class="logo-img" src="../assets/img/logo.png" alt="站点logo">

Vite会将相对路径解析为模块导入，构建时正常处理资源。

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