关于semantic-ui的cdn失效问题(怎样通过本地引用semantic-ui)

之前做了一个项目,前端使用的是semantic-ui,项目一直都是正常运行,今天进去查看的时候发现界面加载很慢,而且没有css和js了,百度了一下发现可能是cdn失效了,现将解决办法记录如下

这是我的登录界面,因为cdn失效,导致界面很难看,下面我们将semantic-ui的依赖文件全部下载下来,通过本地引入的方式来解决这个问题

在这里插入图片描述
首先,下载semantic-ui,链接如下:
https://github.com/semantic-org/semantic-ui

下载完成后,解压,会得到如下图所示的文件,其中dist文件夹中的数据是我们所需要的
在这里插入图片描述
在这里插入图片描述

在static文件夹下建立css和js文件夹,并将上面的dist文件夹中的semantic.min.css和semantic.min.js文件分别复制到css和js文件夹中
在这里插入图片描述

在html界面引入刚刚的文件:

在这里插入图片描述

然后,我们运行程序,在浏览器中访问,结果如下
在这里插入图片描述
发现css和js没有效果,明明文件已经引入成功,而且html的路径也没有错误,为什么没有生效呢?

于是在该界面右键,检查,选择网络,刷新一下:
在这里插入图片描述

我发现css和js文件都报了一个302的错误
在这里插入图片描述

302状态码详解:https://zhuanlan.zhihu.com/p/266780524

也就是说在请求http://localhost:8080/css/semantic.min.css时被 重定向 到http://localhost:8080/login

于是想到了 拦截器,我的项目配置了拦截器,http://localhost:8080/css/semantic.min.css请求被拦截器阻止了,于是开放路径
在这里插入图片描述

重新运行,再次访问,结果如下:

在这里插入图片描述

css和js有效果了,但是图标不显示,于是再次打开检查:

在这里插入图片描述
发现引入图标文件时又爆了302错误,仔细查看请求路径http://localhost:8080/css/static/themes/default/assets/fonts/icons.woff2
发现css文件下不存在上述路径,semantic-ui的图标资源放在dist文件的themes文件夹下,于是在css文件下建立static文件夹,将themes文件复制到static文件下:
在这里插入图片描述

重新运行,结果如下(图标显示正常):

在这里插入图片描述

  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

~浮生~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值