Vue报错--This relative module was not found: * ./static/images/head_ico.png in ./node_modules/......

博客内容涉及如何处理Webpack在解析CSS时找不到静态图片资源的问题。解决方案包括检查CSS预处理器类型并安装相应loader,以及确保引用背景图片时使用正确的相对路径。作者提到在引入背景图片时使用'~@'前缀,该前缀在Webpack配置中通常代表src目录。
摘要由CSDN通过智能技术生成

报错如下:

This relative module was not found:

* ./static/images/head_ico.png in ./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-61dd7a3d","scoped":true,"hasInlineConf
ig":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/Header.vue

搜到的资料:
1.这是由于css解析的时候出了问题,解决方案为:
首先看你使用的CSS语言是什么,是 常规的 或者 less 或者 sass。
如果是 常规 的,执行 npm install style-loader css-loader style-loader --save-dev 安装依赖就行。
如果是 less 的,执行 npm install less less-loader --save-dev 安装依赖就行。
如果是 sass 的,执行 npm install sass sass-loader --save-dev 安装依赖就行。或者($npm intall sass-loader --save ; $npm install node-sass --save)
原文链接:参考链接

2.路径错误或者文件不存在

3.在引入背景图片的时候使用"~@"
~@的意思: @是webpack设置的路径名,代表的是src目录,可以在build / webpack.base.conf.js更改设置

我的是路径问题
改好之后路径是这样的:

background: url('/static/images/head_ico.png') no-repeat;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值