Nginx服务器导致CSS无法解析不起效果

最新推荐文章于 2024-04-23 21:54:41 发布
最新推荐文章于 2024-04-23 21:54:41 发布
阅读量785 收藏
点赞数
文章标签： nginx css vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ChenLuLiang/article/details/121789215
版权

最近部署一个项目html,js正常加载，css也没有报404，css能够正常获取，只是浏览器无法解析，研究了一下发现,原来是配置Nginx的时候将/etc/nginx/nginx.conf的一行include /etc/nginx/mime.types;误删了，导致了Nginx无法正确识别CSS文件，因此向浏览器发送了错误的MIME类型。加上那行，然后重启Nginx守护进行就好了

错误的css和js类型如下面

 

正确的css和js类型应该如下面

 

 

_陈陆亮
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
nginx 负载代理 不能正常 加载 CSS ，JSP等 问题 解决方法
weixin_34292287的博客
10-26 1286
apache 搭载的 论坛，用 nginx 负载均衡，结果 返回的网页 不能加在图片 ， 没有 样式。 用 浏览器 F12 追踪 发现 ， 不能 加载 css 样式 。在网上 找了 好多 方法 。说是 修改正则 解决 问题。 对于我来说 根本 没有作用。。 错误示例 如下：upstreamdr13am{ server172.25.28.26...
Nginx服务器中使用gzip压缩的相关配置解析
01-10
gzip压缩 使用 gzip 压缩可以降低网站带宽消耗，同时提升访问速度。 主要在nginx服务端将页面进行压缩，然后在浏览器端进行解压和解析， 目前大多数流行的浏览器都迟滞gzip格式的压缩，所以不用担心。 默认情况下，Nginx的gzip压缩是关闭的，同时，Nginx默认只对text/html进行压缩 主要配置如下： gzip on;#开启 gzip_http_version 1.0;#默认1.1 gzip_vary on; gzip_comp_level 6; gzip_proxied any; gzip_types text/plain text/html text/css app
Nginx服务器配置文件完全解析
09-30
主要介绍了Nginx服务器配置文件完全解析,Nginx的异步非阻塞特性使其拥有非常出色的性能,需要的朋友可以参考下
网页制作CSS不解析问题
路向何方
12-04 597
网页采用了 UTF-8 编码格式，这本来没有问题，问题是外部 CSS 文件默认是 ANSI 编码，并没有保存为 UTF-8 格式。可能你会发现在一般情况下这样也是没有问题的，然而当 CSS 文件中包含有中文注释时就可能不尽如人意了！估计是 IE6 版本以下的浏览器在解析这个 CSS 文件时因为编码问题而无法正确解析，所以才会发生 CSS 在 IE6 下不起作用的情况。看来微软已注意到这个问题，
nginx部署二级目录无法加载css和js问题解决方案
guiripei的专栏
07-06 9791
nginx部署二级目录无法加载css和js问题解决方案
CSS不起作用也不报错 nginx配置缺失导致
zhangmingyue1226的博客
03-11 951
nginx部署前端项目出现css不起作用问题，但不报错
解决nginx部署后css、js、图片等样式加载不出来问题
weiwenhuaming_的博客
06-29 5368
修改nginx的conf配置文件 关键配置 location / { proxy_pass http://myServer; proxy_set_header Host $host; root html; index index.html index.htm; } location ~ .* { proxy_pass http://myServer; proxy_set_header Host $http_host;
tomcat+nginx,出现https链接无法访问http链接的CSS及JS
cheng0214c的博客
08-02 1068
参考：https://blog.csdn.net/qq_27114677/article/details/77848078 在使用tomcat+nginx时，如果是nginx代理https请求，可能会出现页面可以访问，但是无法加载js和css，这是由于nginx代理https，而nginx和tomcat之间是http，会报：The page at ‘https://XXX’ was loaded ...
Vue打包部署到Nginx时,css样式不生效的解决方式
10-15
主要介绍了Vue打包部署到Nginx时,css样式不生效的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
nginx 部署 vue 项目找不到js css文件的解决方法
01-11
很多时候 npm run build 之后， index.html 文件中webpack 自动插入的 js 文件 css 文件的相对目录总是不对，发布到服务器上之后，nginx 找不到文件。 vue-cli@3 在 vue-cli@3 中你需要为你 webpack 插入到 index....
NUXT踩坑—CSS消失
qq_42201962的博客
11-06 2649
NUXT踩坑首屏CSS样式不生效，图片缺失发现问题及解决办法 首屏CSS样式不生效，图片缺失 本地运行没有问题，但是部署之后会发现，首页的格式发生了变化，部分CSS未生效，部分组件缺失。其他页面都正常，并且从其他页面跳转过来都是正常的 如下图： 下面的页面是正常的： 发现问题及解决办法 首页的部分样式是生效的，部分却没生效。仔细观察发现没有生效的部分都采用了组件引入的方式，为什么引入的组件样式却没有被引入呢？ 原来是因为，我将组件引入写在了nuxt.config.js里面： plugins: [
解决Vue打包部署到Nginx时，css样式不生效问题
热门推荐
PythonCodeZ的博客
11-12 1万+
今天在将使用Vue-cli编写的前端项目部署到Nginx的时候发生了一件很困扰的问题： Vue-cli项目在本地 使用 npm run dev的时候，页面样式是可以正常加载出来的，但是我将Vue-cli项目通过npm run build 打包生成的 dist 目录部署到Nginx之后，通过访问是无法加载出来样式的。 于是乎，在网上开始寻找资料，发现大部分前辈的解决方案都是在，config的文件夹...
nginx 中配置多个location并解决js/css/jpg/等的加载问题
ManNiaoQinFen的博客
09-02 2319
环境：centOS nginx php mysql 情况：静态文件无法加载，包括但不限于css,js，各种图片等 解决方案：nginx.conf中配置，代码如下，需要配置的是上面这个location的内容，下面的是配置php的 location ~ .*\.(jpg|jpeg|gif|png|ico|css|js|woff|woff2|ttf|pdf|txt)$ //里面一串为静态文件后缀，...
解决nginx部署后css、js、图片等样式不加载的问题
Littleree的博客
08-27 415
解决nginx部署后css、js、图片等样式不加载的问题
Nginx反向代理无法加载css、js、image静态资源文件
qq_37254736的博客
02-18 3352
最近在学习Nginx时，将项目部署到tomcat，通过Nginx的反向代理进行映射，访问Nginx服务器时，页面显示空白，按F12后发现css、js、image等静态资源无法访问。 在配置文件添加如下配置 location ~.*\.(css|js|jpg) { # 需要注意两点：1.proxy_pass的值不能有 / ，2.也不能有uri proxy_pass http://127.0.0....
nginx中css样式加载失败的解决
qq_54922344的博客
04-19 1787
原项目结构 部署后项目结构 nginx.conf配置 异常 分析原因，相对路径不管用，因为html目录为根目录，所以../仍为html目录,对应url仍为ip:port 解决
nginx无法加载css
幽雨雨幽
12-07 1540
配置文件中添加 includemime.types; default_type application/octet-stream; 如果不设置css文件就会被当作text/plain类型发送到浏览器。从而导致css文件无法显示。
理解CSS中的sticky与fixed定位
最新发布
nbsaas-boot基于Request-Response的企业级快速开发框架
04-23 420
在CSS中，和是两种常见的定位方式，它们可以让元素脱离文档流，并具有固定位置的效果。然而，它们在实际应用中有着不同的特点和使用场景。
nginx是如何解析vue
01-11
nginx是一个高性能的开源Web服务器软件，它可以作为反向代理服务器和负载均衡器，用来处理HTTP请求并将其转发到后端的服务器。 要了解nginx如何解析Vue，我们首先需要了解Vue的工作原理。Vue是一种前端JavaScript框架，它使用虚拟DOM（Virtual DOM）和组件化的方式来构建用户界面。Vue的应用程序通常由一个HTML模板、JavaScript代码和由Vue组件构成的结构组成。 当用户访问一个使用Vue构建的网站时，Vue的核心库会根据应用程序的配置和路由规则来生成响应的Vue实例。这个过程通常会发生在浏览器中。然后，浏览器会解析HTML文档，并根据Vue实例的指令和绑定来生成真实的DOM元素。 而nginx作为Web服务器，负责接收用户发起的HTTP请求，并对请求进行处理。当用户访问一个使用Vue构建的网站时，nginx会检查请求的URL路径，并根据配置文件中的指令来判断如何处理该请求。 在nginx的配置文件中，可以配置一个location块来指定特定URL路径的处理方式。对于Vue应用程序而言，通常会配置一个location块来将所有的静态资源（包括HTML、CSS和JavaScript文件）指向Vue应用程序所在的目录。 当用户访问Vue应用程序的URL时，nginx会检查相关的location配置，并将请求转发到Vue应用程序的目录。然后，浏览器会从该目录下载HTML、CSS和JavaScript文件，进行解析和运行。 总结起来，nginx并不会直接解析Vue，它只负责将Vue应用程序的静态资源发送给浏览器，然后浏览器进行解析和运行。所以，nginx在解析Vue方面的角色相对较小，主要起到了静态资源服务器的作用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_陈陆亮

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值