nginx优先读取html文件,Nginx找到css但不将其加载到index.html中

我的nginx服务器提供一个index.html文件,它加载一个css文件和一些js文件.加载了css文件(NO 404),但样式没有出现.

文件夹:

/src

/assets

/images

...

/sounds

...

/css

/style.css

/js

...

index.html

由js文件加载的声音和图像完美地工作.

/ etc / nginx / sites-enabled / default /:

server {

listen 8080;

server_name jumpnrun jumpnrun.vm;

access_log /var/log/nginx/jumpnrun.access.log;

error_log /var/log/nginx/jumpnrun.error.log;

location / {

try_files $uri $uri/index.html;

}

location ~ ^/(assets/|css/|js/|index.html) {

root /src;

index index.html;

access_log off;

}

location /socket.io {

add_header Access-Control-Allow-Origin *;

proxy_set_header Upgrade $http_upgrade;

proxy_set_header Connection "upgrade";

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

proxy_set_header Host $host;

proxy_http_version 1.1;

proxy_pass http://node-server;

}

}

index.html:

Jump n' Run

如果我去localhost:8080它给我索引页面,但没有任何样式和开发工具没有显示任何错误.

谢谢你的帮助!

编辑:

整个事情是在一个docker容器中..现在每次我浏览到localhost:8080 nginx死了.错误日志以某种方式无法访问..

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Nginx 用作静态资源服务器时,可能遇到 Vue 项目 CSS 不加载的问题。通常,这是由于 Nginx 配置不正确或缺少必要的配置所导致的。 首先,我们需要确保在 Nginx 正确配置了静态资源的路径。可以在 Nginx 的配置文件设置指向 Vue 项目的根目录,并设置正确的 location 规则来处理静态文件,如下所示: ``` server { ... root /path/to/vue-project; location / { try_files $uri $uri/ /index.html; } location ~* \.(css|js|gif|jpeg|jpg|png|svg|woff|woff2|ttf|eot|ico)$ { expires 1y; add_header Cache-Control "public"; } ... } ``` 上述配置,我们使用 `root` 指令指定 Vue 项目的根目录,通过 `location /` 将所有的请求都交给 `index.html` 处理,以便 Vue Router 可以正确处理前端路由。 而对于静态文件,我们使用 `location ~* \.(css|js|...)` 正则匹配并添加相应的缓存和响应头。 在配置完成后,重新加载 Nginx 使配置生效。此时,在浏览器访问 Vue 项目,应该能够正确加载 CSS 文件。 但如果仍然不能加载 CSS 文件,还需要检查 CSS 文件路径是否正确,并确保文件读取权限设置正确。可以通过查看浏览器控制台的网络请求,以及 Nginx 的错误日志来进一步排查问题。 综上所述,要解决 Nginx Vue 项目加载 CSS 文件的问题,需要配置正确的静态资源路径和相应的 location 规则,确保文件读取权限正确,并及时排查报错的日志以便定位问题所在。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值