前端无法渲染CSS文件

时间:2022-10-24 17:09:19

问题描述:

启动前端后,发现前端的页面渲染不符合预期,看情况应该是css文件没有生效。

前端无法渲染CSS文件

排查步骤:

  1. 查看有无报错信息。
    查看后台输出,没有可用的提示信息,如图:
    前端无法渲染CSS文件

  2. 确认 css 的路径没错。
    前端打包后的文件目录如下:
    前端无法渲染CSS文件
    html 中的 css 路径如下:
    前端无法渲染CSS文件
    文件路径符合。

  3. 确认前端有请求到css。
    再查看前端发送的请求,确实有请求css,但是 response 的Content-Typetext/plain
    前端无法渲染CSS文件
    前端无法渲染CSS文件

排查到这里,基本就确定了原因——浏览器只会渲染Content-Typetext/css的css文件。

前端无法渲染CSS文件

解决方法:

在 Nginx 配置文件中添加这两行代码即可。

# 引入MIME配置文件
include  /etc/nginx/mime.types;
# 指定默认的文件类型为 application/octet-stream
default_type  application/octet-stream;

Web服务器在收到静态资源的文件请求时,会进行以下操作:

  1. 识别文件的后缀名;
  2. 服务器的MIME配置文件中找到对应的 MIME Type;
  3. 根据 MIME Type 设置 response 的Content-Type

因此,在使用Nginx作为代理服务器时,需要在nginx.conf 引入MIME配置文件。

参考资料:

Nginx(十八)mime.types的作用_wzj_110的博客

MIME 类型 - HTTP | MDN