刚解决了一个问题,前端代码发布到服务器后,样式没有生效。
开始以为 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。
|