nginx部署程序css正常下载，但是页面却无法正常的显示css

前言

最近在研究ant design of vue，基于这个框架写了一套前端的mock的权限架构，刚好遇到某云做活动就买了某云的服务器，准备将自己写的demo例子部署上去跑下看下效果，没想到部署上去，页面可以正常访问可是css下载下来了但是页面去没有正常的渲染，自己在测试环境和本机上都是正常的，通过排查最后才发现由于服务器上是基于docker在nginx上进行部署的缺少mime.types的配置文件，由于自己本机和测试环境的nginx都是直接部署的因此本身都是包含mime.types文件因此都可以正常访问，因此修改以后就可以了。

错误复现

以下是启动docker的命令不带mime.types的配置文件的，若大家对如何在docker下如何启动nginx不熟悉可以直接看我这篇博客：https://blog.csdn.net/linzhefeng89/article/details/101678391

docker run --name nginx-dev -p 8081:8081  -v /home/nginx/logs:/var/log/nginx  -v /home/nginx/conf/nginx.conf:/etc/nginx/nginx.conf -v /home/nginx/html:/usr/share/nginx/html --privileged=true  -d docker.io/nginx

然后这时候大家访问部署了nginx的服务器会发现如下的页面：

我们的css已经正常下载下来可是却没有效果，这是为什么呢，通过比对我本机我发现，Response Headers中返回的时候没有指定我们的文件的读取类型，因此导致无法正常的渲染我们的页面。

解决问题

那么我们接下来就是如何解决这个问题，非常的简单大家只需要加入mime.types的配置就可以了，修改我们的nginx.conf配置文件：

#pid        logs/nginx.pid;
events {
    worker_connections  1024;
}

http {
    sendfile        on;
    keepalive_timeout  65;
                      
    gzip  off;
    # 引入mime.types即可
    include       mime.types;
    default_type application/octet-stream;


    server {
        listen       8081;
        server_name  localhost;
        
        client_body_buffer_size 50m;
        client_max_body_size 50m;

        location / {
            root  /usr/share/nginx/html;
            index  index.html index.htm;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
       
    }
}

然后接着我们再次启动我们的nginx，然后我们再次访问我们的nginx部署的服务器，我们可以看到我们的服务器已经可以正常加载了。

到此处就解决了我们遇到的问题。