前端开发：遇到This relative module was not found 的解决方法

三掌柜

发布于 2022-04-12 17:05:00

16.2K0

发布于 2022-04-12 17:05:00

前言

在前端开发的时候，会遇到因为引入的文件路径不正确而造成的报错问题，这类问题在前端开发过程中很常见，但是还是会遇到不少坑。那么本文就来分享一个关于在前端开发过程中遇到This relative module was not found 的报错的解决方法。

报错提示

ERROR  Failed to compile with 1 errors                                                                                                              上午10:55:30
This relative module was not found:
* ../assets/images/icon_tips.png in ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-b98493b6","hasScoped":true,"transformToRequire":{"video":"src","source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/Popover.vue

报错原因

本案例的报错是因为引入图片的路径没有写对，造成找不到图片。其他的同款错误可能是文件中引入图片出现问题，路径错误或者文件不存在，类似问题也是如此，所以在开发中遇到类似的报错直接排查路径即可解决问题。具体的示例解决方法如下所示。

解决方法

先来看一下报错之时的写法，具体如下所示：

1、原始代码写法

<span
    v-if="content"
    ref="popover"
    data-toggle="popover"
    data-placement="top"
    data-trigger="click"
    role="button"
    data-container="body"
    @touchstart="onTouchstart"
  >
    <slot name="reference" @click="onClick">
      <van-icon :name="require('../assets/images/icon_tips.png')" />
    </slot>
  </span>

对比错误排查之后，修改有问题的代码之后的写法，具体如下所示：

2、修改后的代码写法

  <span
    v-if="content"
    ref="popover"
    data-toggle="popover"
    data-placement="top"
    data-trigger="click"
    role="button"
    data-container="body"
    @touchstart="onTouchstart"
  >
    <slot name="reference" @click="onClick">
      <van-icon :name="require('../assets/image/icon_tips.png')" />
    </slot>
  </span>