前言

在前端开发的时候，会遇到因为引入的文件路径不正确而造成的报错问题，这类问题在前端开发过程中很常见，但是还是会遇到不少坑。那么本文就来分享一个关于在前端开发过程中遇到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>

经过对报错地方的排查，修改报错的地方之后，重新运行项目，报错问题就解决了。

最后

通过上面介绍的关于在前端开发过程中遇到This relative module was not found 的解决方法，往后再在前端开发中遇到类似报错问题就可以很好的解决了，这里不再赘述。以上就是本章的全部内容，欢迎关注三掌柜的微信公众号“程序猿by三掌柜”，三掌柜的新浪微博“三掌柜666”，欢迎关注！