vue-cli项目引入assets里的css样式出错

在vue-cli项目中引入阿里云字体库的css样式时遇到问题,表现为引入路径出现?t=参数导致错误。通过对比发现与正常情况的差异,并参考类似问题的解决方案,尝试直接使用阿里云字体库的在线链接,成功解决问题。若选择修改正则匹配,也是可行的解决途径。

vue-cli项目引入assets里的css样式出错


在写个人项目的时候,引入了阿里云字体库,如下所示:

这里写图片描述

然后再Login.vue组件里引入样式表

这里写图片描述
然后npm run dev就出问题了

这里写图片描述

之前我这样做在其他的项目中没出现问题,后来看到这个问题,和我的问题很像,这里写链接内容
于是我在用相同的方法引入测试的样式表,没出现问题这里写图片描述

最后定位问题出现在这:
这里写图片描述
左侧的是我之前写的没问题的,右侧的是出问题了的,可以对比一下,它们有些地方不一样,右侧的多了?t=之类的参数,本来想按照上面的问题链接去修改的。。但是正则匹配起来比较麻烦,所以我直接用了阿里云字体库的在线链接

这里写图片描述
可以看到,代码中没有之前那样?t=这样的东西了,将上述代码替换到它默认的@font-face即可。然后npm run dev就能正常运行了。

修改正则匹配应该也可以,厉害的大神可以去试一下。

以上纯属个人经验见解,若有错误之处,还请批评指正。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值