IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 系统运维 -> 网站部署到服务器后 CSS 文件加载成功,但是没有生效 -> 正文阅读

[系统运维]网站部署到服务器后 CSS 文件加载成功,但是没有生效

刚解决了一个问题,前端代码发布到服务器后,样式没有生效。

开始以为 nginx 配置的静态资源路径有问题,通过 network 发现 css 文件确实请求成功。

然后怀疑代码有问题,查看 css 文件中其中一个 dom 节点的样式,确实能匹配上(data-xxx 一致),将样式拷贝后通过 elements 看板手动添加上,样式也生效了。

文件下载成功,内容没问题,但就是没有生效,好像浏览器并没有据此构建 CSSOM(这一点也许可以通过性能调试工具查看),如此神奇的事情之前没有遇到过。

后来发现原来是 nginx 配置错误,由于配置文件是事先组织好发给运维去部署的,所以没有对其仔细进行验证,nginx 配置文件中缺少了 MIME 配置:

include       mime.types;

nginx 的 conf 目录下默认有个文件 mimx.types,包含各种 MIME 配置,内容:


types {
    text/html                                        html htm shtml;
    text/css                                         css;
    text/xml                                         xml;
    image/gif                                        gif;
    image/jpeg                                       jpeg jpg;
    application/javascript                           js;
    application/atom+xml                             atom;
    application/rss+xml                              rss;

   ...
}

右边是文件后缀,左边是关联这个文件类型的 MIME。

服务器会根据资源文件的后缀去 types 配置中查找对应的 MIME,然后将其添加到响应头 content-type 中,这样客户端收到响应后,才会知道该如何处理它,例如 text/css 会构建 CSSOM。

  系统运维 最新文章
配置小型公司网络WLAN基本业务(AC通过三层
如何在交付运维过程中建立风险底线意识,提
快速传输大文件,怎么通过网络传大文件给对
从游戏服务端角度分析移动同步(状态同步)
MySQL使用MyCat实现分库分表
如何用DWDM射频光纤技术实现200公里外的站点
国内顺畅下载k8s.gcr.io的镜像
自动化测试appium
ctfshow ssrf
Linux操作系统学习之实用指令(Centos7/8均
上一篇文章      下一篇文章      查看所有文章
加:2022-05-10 12:16:32  更:2022-05-10 12:18:28 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/15 15:45:27-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码