nginx 解决css、js请求路径无法加载问题

        location / {
        proxy_pass http://jfinaldemo;
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        client_max_body_size    1000m;
        proxy_set_header   Host             $host;
        proxy_set_header   X-Real-IP        $remote_addr;
        proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
        }
        location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
        {
           proxy_pass http://jfinaldemo;
        }

        location ~ .*\.(js|css)?$
        {
            proxy_pass http://jfinaldemo;
        }

解决方法如上。主要是下面两个配置项的修改

  location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
        {
           proxy_pass http://jfinaldemo;
        }

        location ~ .*\.(js|css)?$
        {
            proxy_pass http://jfinaldemo;
        }

2018-05-21,其实js,css都算静态资源,之所以请求不到是因为nginx做代理后的虚拟路径和静态资源的请求路径不一致导致的。

转载于:https://www.cnblogs.com/wendu/p/6859035.html

  • 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、付费专栏及课程。

余额充值