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

布满荆棘的人生 2023-06-11 03:23 21阅读 0赞

### 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][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的服务器会发现如下的页面：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70]  
我们的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部署的服务器，我们可以看到我们的服务器已经可以正常加载了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 1]  
到此处就解决了我们遇到的问题。

[https_blog.csdn.net_linzhefeng89_article_details_101678391]: https://blog.csdn.net/linzhefeng89/article/details/101678391
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70]: /images/20230531/7d2c4c8ea953446f82a5748dee37470b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 1]: /images/20230531/f18c6b308d6046129d63620683fc007a.png