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