Vue项目构建时出现RollupError：图片路径解析失败求助

问题分析 #

错误提示Rollup无法解析../img/react%202.png，本质是图片路径含URL编码的空格，或文件实际不存在、路径引用错误；删除涉事图片后仍报错，说明还有其他类似路径问题或缓存残留。

解决步骤 #

• 排查并修正所有图片引用路径

  1. 打开src/component/avatarmenu.vue，找到对应图片的引用代码：将带%20的路径改为实际文件名——要么保留空格（代码里写../img/react 2.png），要么直接把文件名里的空格换成下划线/连字符（比如react_2.png），避免URL编码引发解析问题。
  2. 全局搜索项目中所有含%20的路径，逐一修正，同时确保所有图片的相对路径和实际文件位置完全匹配。

• 清理缓存后重新构建

  1. 删除项目根目录下的dist文件夹，以及node_modules/.cache（如果存在）。
  2. 执行npm install重新安装依赖，再运行npm run build尝试构建。

• 检查静态资源配置（按需）

  • 若使用Vite构建：在vite.config.js中确保配置了正确的资源包含规则，比如：

    export default defineConfig({
      assetsInclude: ['**/*.png', '**/*.jpg', '**/*.jpeg']
    })
    

  • 若使用Vue CLI构建：检查vue.config.js里的assetsDir配置，确认静态资源目录设置正确。

• 统一文件名大小写
  Windows系统不区分文件名大小写，但构建工具可能严格校验，确保代码中引用的路径和实际文件名大小写完全一致（比如不要混用React2.png和react2.png）。

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