nginx css或js无法加载的问题

最新推荐文章于 2025-03-09 18:57:52 发布
最新推荐文章于 2025-03-09 18:57:52 发布
阅读量1.9w 收藏 2
点赞数
分类专栏： ngnix 文章标签： nginx css javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_24002549/article/details/54970608
版权

昨天我在linux上配置好了相应的nginx和tomcat.然后把我的项目放在上面了.然后配置了相应的nginx的配置.加载首页的时候是没有问题的.如下图:


但是一旦进入了其他的页面就会因为css文件没有加载而导致排版错误.大概搞了一个多小时.在网上也找了很久但就是没有解决问题.有一个很奇怪的现象就是.我主页的css加载完全的没有问题.仔细一想我之前对tomcat这个下面的文件夹内的所有文件都进行了权限的修改.之后,由于我项目缺少一个包,后来又重新放入了一个新的war包.我就突然想起来.可能是我的权限问题.然后我使用chmod -R 777 /你的linux下项目的地址. 比如我的项目是WebShop,那么我实际用的是以我的命令是:

chmod -R 777 /home/hdy/tomcat/webapps/WebShop/

之后再重新刷新服务器,就发现没有任何的问题了.



最后,附上我的nginx中的配置文件.初学者,还不是很懂.如果配置文件有什么不对的地方.大家提醒一下我哈.


Nginx反向代理内网web系统找不到CSS，JS及图片问题解决方案
飞龙在天
04-04 1万+
一、背景介绍： 有个部署在内网的web单体应用，需要通过部署在DMZ区的Nginx访问到，由于需要复用现有的域名，所以只能是通过在Nginx上增加location的方式访问。 二、问题描述： 但是在访问的时候，发现通过location能够跳转到内网的web应用，但是显示的是空白页面，通过在浏览器上F12，发现是访问不到web应用的css，js和图片。 三、解决方案： 3.1解决方案一：在Nginx的location中增加请求头 在nginx的nginx.conf配置文件中添加如下配置 lo
解决nginx动静分离，css、js、图片等样式不加载的问题
weixin_45754572的博客
11-21 1166
1、加载不出的效果 2、修改nginx配置，添加此配置，可以解决此问题 location ~ .* { proxy_pass http://wg; proxy_set_header Host $http_host; proxy_set_header X-Real-IP $remote_addr;...
nginx反向代理转发后页面上的js css文件无法加载【原创】
weixin_33877092的博客
12-07 2524
故障现象：nginx做代理转发后，发现页面上的js css文件无法加载，页面样式乱了。   原因：没有配置静态资源 解决js css文件无法加载无法访问的问题   解决办法： 修改配置文件nginx.conf，在server字段中添加黄色标注部分 server { listen 80; server_name tes...
Nginx完全指南：从入门到精通（基于Ubuntu系统）
最新发布
i89211的博客
03-09 1133
本博客系统介绍了Nginx在Ubuntu系统上的安装、配置、调试及优化方法。内容包括Nginx基础概念、安装步骤、配置文件结构、反向代理与负载均衡配置、HTTPS设置、日志管理，以及性能与安全优化等实用技巧。无论你是初学者还是进阶用户，本指南都能帮助你轻松掌握Nginx，提升Web服务部署与管理能力。
nginx部署前端项目 nginx部署无法加载js/css问题 Uncaught SyntaxError: Unexpected token ‘＜‘
weixin_43091752的博客
10-17 6351
注意：将多个html项目放在一个server中出现js,css加载不出来问题。可以将文件放在主项目同级目录下（暂时解决，可能是静态资源配置问题，不会弄）。6.处理所有引用的部分前面加上，在conf中添加的映射路径。5.普通html项目，部署会出现以下错误。3.修改nginx.conf文件。4.修改端口防止占用和添加新映射。2.将项目放入html目录下。1.下载nginx,解压。
nginx进行反向代理时js、css等文件无法正常加载的问题
yyiyike的博客
09-08 4484
然后重新加载nginx配置即可。原因 ： 没有配置静态资源。
nginx CSS JS加载失败
01-10 1920
问题 将网站部署到nginx之后，网页可以打开，但样式全都没有加载，浏览器里按下F12键，console有报错： Resource interpreted as Stylesheet but transferred with MIME type text/plain 文件已经被找到，但是解析的格式不正确。 原因 需要引入mime.types这个文件，如果不指定mime type...
nginx 部署 vue 项目找不到js css文件的解决方法
01-11
很多时候 npm run build 之后， index.html 文件中webpack 自动插入的 js 文件 css 文件的相对目录总是不对，发布到服务器上之后，nginx 找不到文件。 vue-cli@3 在 vue-cli@3 中你需要为你 webpack 插入到 index....
Vue打包部署到Nginx时,css样式不生效的解决方式
10-15
在上述问题中，Nginx可能没有正确地识别CSS文件，而是将其当作普通文本处理，导致浏览器无法正确解析样式。 为了解决这个问题，我们需要在Nginx的配置文件（通常是`nginx.conf`或对应的虚拟主机配置文件）中添加或...
nginx部署后不能加载JS,CSS问题
Joe__show的博客
01-10 997
在网上搜了一大推的办法，没解决！突然想到好像看过一个视频解说过要给静态文件夹单独配个路由、 然后 我的静态文件收集在static里面，所以给他配了个路由 完美解决了
nginx 无法加载css/js图片等文件 404 not fund
daxiang0528的博客
01-17 1002
　　刚配置Nginx反向代理，Nginx可能会出现无法加载css、js或者图片等文件，这里需要在配置文件*.conf里面加上如下配置项。 location ~ .*\.(js|css|png|jpg)$ //这是是需要加载文件的正则过滤 如果有其他文件再加上即可 { root D:/WWW/web/; //这是网站根目录 ...
Nginx反向代理无法加载css、js、image静态资源文件
qq_37254736的博客
02-18 3582
最近在学习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和js问题解决方案
guiripei的专栏
07-06 1万+
nginx部署二级目录无法加载css和js问题解决方案
解决nginx多层代理后应用部署后访问发现css、js、图片等样式加载失败
神奇侠MAKER
01-09 941
【代码】解决nginx多层代理后应用部署后访问发现css、js、图片等样式加载失败。
解决nginx部署后css、js、图片等样式不加载的问题
热门推荐
叶新东老师的博客
09-02 9万+
这里有2种方案可以解决，这里只介绍第一种，第二种我也没试过，但是觉得应该可行 1、修改nginx的conf配置文件 2、更改web服务器contextPath为ip+端口的方式，举例：HttpServletRequest.getContextPath(); 使用nginx的反向代理后，发现页面能正常跳转，可是css、js和相关的图片就是不出来,如下图 查看了a标签内的链接发现，c...
nginx反向代理加载不出css等静态
weixin_50622066的博客
09-27 3584
nginx 反向代理
前端必备！最全nginx技术分析
iware99的博客
04-03 348
前端必备！最全nginx技术分析 作者｜ConardLi 来源｜code 秘密花园公众号 nginx 在应用程序中的作用 解决跨域 请求过滤 配置 gzip 负载均衡 静态资源服务器 nginx 是一个高性能的 HTTP 和反向代理服务器，也是一个通用的 TCP/UDP 代理服务器，最初由俄罗斯人 Igor Sysoev 编写。 ngi...
关于vue项目打包部署到nginx服务器，由于js文件过大导致首次加载速度过慢的解决办法和踩坑
yorcentroll的博客
10-22 1万+
很多时候，一个vue项目打包下来，app.js 主文件都会有几兆，大点的项目都会有十几二十兆，还有app.css的打包文件可能也会很大。 对于一般的服务器来说，首次去打开部署好的平台页面，加载起来会很慢。 这样的速度肯定是不能容忍的。 当然，首要的途径是先尽量给打包文件app.js和app.css减重，让它更轻。不过，大部分时候，这个文件再怎么建你也不能从20M减到10M,5M，甚至更小。 ...
nginx css js无法访问_Nginx入门级分享
weixin_39888180的博客
11-28 863
前言：老大要求把项目迁移到公司云环境，在部署整个项目的过程中，由于自己之前并不熟悉Nginx，导致在配置Nginx衔接前后端的过程中一直是步履蹒跚，磕磕绊绊，上周整个项目顺利进入了容器时代，就在这篇公号下，分享一下这段时间自己的Nginx入门。Nginx是什么？Nginx (engine x)是一款轻量级的 Web 服务器 、反向代理服务器及电子邮件(IMAP/POP3)代理服务器。‍...
nginx部署css js
01-16
### 正确配置 Nginx 部署 CSS 和 JS 文件 #### 理解 Nginx 配置文件结构 Nginx 的配置文件虽然初看之下可能显得复杂，但其灵活性和强大的功能有助于显著提高 Web 服务器的性能与安全设置[^1]。 #### 解决静态资源路径问题 当使用 `npm run build` 构建 Vue 项目后，在生产环境中可能会遇到由于相对路径错误而导致浏览器无法找到 JavaScript 或者 CSS 资源的情况。这通常是因为构建工具（如 webpack）自动生成的 HTML 中引用的静态资源路径不符合预期的结果[^2]。 为了修正这个问题，可以在项目的 `vue.config.js` 文件中指定公共基础 URL (`publicPath`) 来调整打包后的资源链接前缀： ```javascript module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/your-project-name/' : '/' }; ``` 这样做的目的是确保所有的静态资源请求都指向正确的上下文根路径下。 #### 处理二级目录下的资源访问 如果应用被部署在一个子路径而非站点根部，则需特别注意 Nginx 对于该位置块(`location`)内的资源定位方式。对于位于 `/cms/` 下的应用来说，简单的 `root` 指令可能导致实际查找路径不匹配的问题；此时应考虑采用 `alias` 替代 `root` 并正确指明绝对路径来解决问题[^3]: ```nginx server { listen 80; server_name localhost; location /cms/ { alias /path/to/project/dist/; try_files $uri $uri/ /index.html; } } ``` 这里的关键在于理解 `alias` 是相对于整个 URI 进行映射，而不仅仅是附加到定义的位置后面作为起始点。 #### MIME 类型支持 有时即使成功加载了样式表，也可能因为缺少适当的 MIME 类型声明而不生效。因此建议确认 Nginx 已经包含了标准的 `mime.types` 文件，并且在 HTTP 块中有如下指令以保证正确解析各种类型的静态文件[^4]: ```nginx http { include mime.types; default_type application/octet-stream; # ...其他配置... } ``` 以上措施共同作用可有效解决大多数情况下关于 Nginx 上部署前端应用程序时所面临的静态资源管理难题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值