nginx 部署web页面的时候,路径都是对的,但是css文件就是不起作用,控制台提示如下,原来是格式的问题,截图如下:

css 被转成了application/octet-stream,这个是nginx的默认格式,所以需要在nginx的配置文件上配置type,配置文件截图为:

mime.types 内容为:

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;

    text/mathml                           mml;
    text/plain                            txt;
    text/vnd.sun.j2me.app-descriptor      jad;
    text/vnd.wap.wml                      wml;
    text/x-component                      htc;

    image/png                             png;
    image/tiff                            tif tiff;
    image/vnd.wap.wbmp                    wbmp;
    image/x-icon                          ico;
    image/x-jng                           jng;
    image/x-ms-bmp                        bmp;
    image/svg+xml                         svg svgz;
    image/webp                            webp;

    application/font-woff                 woff;
    application/java-archive              jar war ear;
    application/json                      json;
    application/mac-binhex40              hqx;
    application/msword                    doc;
    application/pdf                       pdf;
    application/postscript                ps eps ai;
    application/rtf                       rtf;
    application/vnd.apple.mpegurl         m3u8;
    application/vnd.ms-excel              xls;
    application/vnd.ms-fontobject         eot;
    application/vnd.ms-powerpoint         ppt;
    application/vnd.wap.wmlc              wmlc;
    application/vnd.google-earth.kml+xml  kml;
    application/vnd.google-earth.kmz      kmz;
    application/x-7z-compressed           7z;
    application/x-cocoa                   cco;
    application/x-java-archive-diff       jardiff;
    application/x-java-jnlp-file          jnlp;
    application/x-makeself                run;
    application/x-perl                    pl pm;
    application/x-pilot                   prc pdb;
    application/x-rar-compressed          rar;
    application/x-redhat-package-manager  rpm;
    application/x-sea                     sea;
    application/x-shockwave-flash         swf;
    application/x-stuffit                 sit;
    application/x-tcl                     tcl tk;
    application/x-x509-ca-cert            der pem crt;
    application/x-xpinstall               xpi;
    application/xhtml+xml                 xhtml;
    application/xspf+xml                  xspf;
    application/zip                       zip;

    application/octet-stream              bin exe dll;
    application/octet-stream              deb;
    application/octet-stream              dmg;
    application/octet-stream              iso img;
    application/octet-stream              msi msp msm;

    application/vnd.openxmlformats-officedocument.wordprocessingml.document    docx;
    application/vnd.openxmlformats-officedocument.spreadsheetml.sheet          xlsx;
    application/vnd.openxmlformats-officedocument.presentationml.presentation  pptx;

    audio/midi                            mid midi kar;
    audio/mpeg                            mp3;
    audio/ogg                             ogg;
    audio/x-m4a                           m4a;
    audio/x-realaudio                     ra;

    video/3gpp                            3gpp 3gp;
    video/mp2t                            ts;
    video/mp4                             mp4;
    video/mpeg                            mpeg mpg;
    video/quicktime                       mov;
    video/webm                            webm;
    video/x-flv                           flv;
    video/x-m4v                           m4v;
    video/x-mng                           mng;
    video/x-ms-asf                        asx asf;
    video/x-ms-wmv                        wmv;
    video/x-msvideo                       avi;
}

  

解决问题参考链接有:https://blog.csdn.net/m0_37904728/article/details/78745243https://www.imooc.com/article/8507

nginx 部署web页面问题的更多相关文章

  1. Mono+Jexus部署Web页面

    一.web页面 二.Jexus默认站点的配置文件(只需修改站点路径) ###################### # Web Site: Default ###################### ...

  2. 利用Docker Hub上的Nginx部署Web应用

    Docker Hub上提供了很多镜像,如Nginx,我们不需要自己从ubuntu开始装Nginx再做发布,只需要先下载镜像到本地 docker pull nginx 在/opt下新建文件夹API,将需 ...

  3. nginx部署静态页面

    1.创建文件存放的目录: 2.vim nginx.conf    找到这个文件然后进入编辑模式 注:进入到文件后:点击a:可以编辑文件, server_name 127.0.0.1;    写上ip或 ...

  4. nginx部署web.py项目

    = =测试环境直接就python index.py就好啦 生产环境nginx + web.py + uwsgi 安装uwsgi... pip install uwsgi 首先把自己的代码小改一下... ...

  5. Nginx部署静态页面及引用图片有效访问的两种方式

    nginx安装百度一下有很多,直接正题: 静态文件目录结构 file#文件位置 /home/service/file/ css js images html fonts 配置nginx.conf核心代 ...

  6. 用nginx的反向代理机制解决前端跨域问题在nginx上部署web静态页面

    用nginx的反向代理机制解决前端跨域问题在nginx上部署web静态页面 1.什么是跨域以及产生原因 跨域是指a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,或是a页面为ip地 ...

  7. 在CentOS 上搭建nginx来部署静态页面网站

    在centOs 上搭建nginx来部署静态页面网站 一.部署服务器环境 nginx:轻量级.高性能的HTTP及反向代理服务器,占用内存少,并发能力强,相比老牌的apache作为web服务器,性能更加卓 ...

  8. nginx的web缓存服务环境部署记录

    web缓存位于内容源Web服务器和客户端之间,当用户访问一个URL时,Web缓存服务器会去后端Web源服务器取回要输出的内容,然后,当下一个请求到来时,如果访问的是相同的URL,Web缓存服务器直接输 ...

  9. Nginx+uWSGI+Django部署web服务器

    目录 Nginx+uWSGI+Django部署web服务器 环境说明 前言 搭建项目 Django部署 编辑luffy/luffy/settings.py 编辑luffy/app01/views.py ...

随机推荐

  1. 安装SQL Server2016正式版

    安装SQL Server2016正式版 今天终于有时间安装SQL Server2016正式版,下载那个安装包都用了一个星期 安装包可以从这里下载: http://www.itellyou.cn/ ht ...

  2. duilib学习 --- 360demo 学习

    我想通过360demo的学习,大概就能把握duilib的一般用法,同时引申出一些普遍问题,和普遍解决方法.并在此分享一些链接和更多内容的深入学习..... 原谅我是一个菜鸟,什么都想知道得清清楚楚.. ...

  3. 细数Android开源项目中那些频繁使用的并发库中的类

    这篇blog旨在帮助大家 梳理一下前面分析的那些开源代码中喜欢使用的一些类,这对我们真正理解这些项目是有极大好处的,以后遇到类似问题 我们就可以自己模仿他们也写 出类似的代码. 1.ExecutorS ...

  4. Initializing a Build Environment

    This section describes how to set up your local work environment to build the Android source files. ...

  5. 自学Zabbix3.5-监控项item

    itemItems是从主机里面获取的所有数据.通常情况下item为监控项,一般网络设备.服务器加入了zabbix监控,就需要监控它的cpu负载,那么实现这个方法的东西就叫item. 1. item构成 ...

  6. RecyclerView 实现横向滚动效果

    我相信很久以前,大家在谈横向图片轮播是时候,优先会选择具有HorizontalScrollView效果和ViewPager来做,不过自从Google大会之后,系统为我们提供了另一个控件Recycler ...

  7. aps .net MVC单用户登录

    当不允许多用户同时登录一个帐号时,就需要一种机制,当再登录一个相同的帐号时,前面登录的人被挤下线. 原文地址:http://www.cnblogs.com/f23wangj/p/4984302.htm ...

  8. swiper.js + jquery.magnific-popup.js 实现奇葩的轮播需要

    奇葩的轮播图 说轮播图很简单的,一定是没有遇到厉害的产品. 先说需求: 首先,一个mask会有三张图片,点击左右按钮会左右滑动一张图片的宽度. 点击展示的三张图片的任意一张,弹出遮罩,显示该图片的放大 ...

  9. Linux安装软件出现 “Unable to locate package xxx”错误

    使用新购入的阿里云服务器ECS,预装的Ubuntu,然后想要利用 xrdp 进行远程登陆,但是在输入命令: apt-get install xrdp 出现了 E;Unable to locate pa ...

  10. 微信小程序获取当前地址以及选择地址详解 地点标记

    首先定义事件: bindtap='getLocation' <view class='store-bot' bindtap='getLocation'> <view class='c ...