Vue3项目build构建时无法解析assets图片资源报错解决

安全阿岳

2026-8-28

问题描述

本地执行npm run dev启动Vue 3开发服务运行完全正常，但在Heroku上执行生产构建部署网站时抛出如下资源解析错误：

Could not resolve './assets/Design%20Pics/Drone/7_0030.png' from src/App.vue
error during build:
Error: Could not resolve './assets/Design%20Pics/Drone/7_0030.png' from src/App.vue
    at error (C:\Users\stove\Desktop\Aero Website\AeroWebsite\node_modules\rollup\dist\shared\rollup.js:198:30)
    at ModuleLoader.handleResolveId (C:\Users\stove\Desktop\Aero Website\AeroWebsite\node_modules\rollup\dist\shared\rollup.js:22508:24)
    at C:\Users\stove\Desktop\Aero Website\AeroWebsite\node_modules\rollup\dist\shared\rollup.js:22471:26

问题相关代码片段（项目使用Bulma作为样式框架）：

<section class="section">
<!-- to center columns, the parent has to be the image which is impossible -->
    <div class="card">
      <div class="card-image">
        <figure class="image is-2by1 level">
          <img src="./assets/Design Pics/Drone/7_0030.png" alt="Drone Image" width="1280" height="720">
          <div id="title-overlay-pad" class="is-overlay level-right">
            <div id="title-overlay-background" class="has-text-centered">
              <p id="title-home-page">delivAERO</p>
              <p id="tagline-home-page">Revolutionizing the World's Delivery Infrastructure</p>
            </div>
          </div>
        </figure>
      </div>
    </div>
  </section>

解决方案

该报错由开发环境与生产构建的路径解析逻辑差异导致：Vite开发服务可正常识别模板中带空格的相对资源路径，但生产构建阶段Rollup会将路径中的空格转码为%20，无法匹配到本地实际文件，最终抛出解析错误。

基础修复方式为通过import语句提前引入图片资源，再通过v-bind绑定到模板的src属性上。如果相对路径引入仍存在解析异常，可使用@路径别名（Vue项目默认将@指向src目录）以绝对路径形式引入assets目录下的资源，写法为import 自定义资源名 from '@/assets/资源实际路径.png'。
若使用TypeScript + <script setup>语法时抛出error TS1232: An import declaration can only be used at the top level of a namespace or module.错误，原因是import声明必须放在script块的最顶部，优先级高于所有其他业务代码，正确写法示例：

<script setup lang="ts">
  // 所有import声明放在最顶部，优先于其他JS/TS代码
  import droneImg from '@/assets/Design Pics/Drone/7_0030.png'; // 引入目标图片
  
  // 其余业务逻辑代码写在import语句之后
</script>

模板中原img标签的静态src改为绑定引入的资源变量即可：

<img :src="droneImg" alt="Drone Image" width="1280" height="720">

实测该方案可完全解决生产构建时的静态资源解析问题，多数场景下使用相对路径import引入资源也可正常生效。

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