nginx+vue刷新404

问题原因:
刷新页面时访问的资源在服务端找不到,因为vue-router设置的路径不是真实存在的路径。
如上的404现象,是因为在nginx配置的根目录/Data/app/xqsj_wx/dist下面压根没有loading这个真实资源存在,这些访问资源都是在js里渲染的。

服务端nginx的一开始配置如下(假设域名为:testwx.wangshibo.com):
[[email protected] ~]# cat /Data/app/nginx/conf/vhosts/testwx.wangshibo.com.conf 
         server {
         listen 80;

server_name testwx.wangshibo.com;
         root /Data/app/xqsj_wx/dist;
         index index.html;

access_log /var/log/testwx.log main;

}

如上出现404的原因是由于在这个域名根目录/Data/app/xqsj_wx/dist下面压根就没有loading这个真实目录存在。

问题解决:
在nginx配置里添加vue-route的跳转设置(这里首页是index.html,如果是index.php就在下面对应位置替换),正确配置如下(添加下面标红内容):
[[email protected] ~]# cat /Data/app/nginx/conf/vhosts/testwx.wangshibo.com.conf 
         server {
         listen 80;

server_name testwx.wangshibo.com;
         root /Data/app/xqsj_wx/dist;
         index index.html;

access_log /var/log/testwx.log main;

     location / {
             try_files $uri $uri/ @router;
             index index.html;
         }

        location @router {
            rewrite ^.*$ /index.html last;
        }

}

重启nginx后,问题就迎刃而解了。

原文地址:https://www.cnblogs.com/daysn/p/10298113.html

时间: 2024-08-30 07:54:52

nginx+vue刷新404的相关文章

Vue路由History模式打包后页面空白,刷新404

项目的入口文件index.html直接在服务器访问地址的根目录下,即项目独占一个端口 vue中配置保持不变 nginx中配置如下: server { listen 8899; server_name localhost; location / { try_files $uri $uri/ /index.html; } } 第二种就是 # 打包配置 config-index.js 修改路径: assetsPublicPath: './'; # 前端路由配置 router.js: const rou

部署spring boot + Vue遇到的坑(权限、刷新404、跨域、内存)

部署spring boot + Vue遇到的坑(权限.刷新404.跨域.内存) 项目背景是采用前后端分离,前端使用vue,后端使用springboot. 工具 工欲善其事必先利其器,我们先找一个操作Linux系统的工具极力推荐FinalShell. 一眼看过去是不是感觉很方便,对内存.CPU的监控也可以实时看到,访问目录更是方便,对于Linux小白来说简直是神兵利器. 好了,我要开始入坑了. 问题一:权限不够 把vue包放到tomcat->webapps->ROOT目录下. 启动tomcat:

【转贴】Linux系统NGINX负载均衡404错误处理方法

NGINX负载均衡404错误处理方法 使用NGINX 实现负载均衡,但一组服务器的数据不是实施同步,主服务器有了数据要过段时间才同步到其他服务器 upstream   image.stream.com   { server 192.168.1.25:8088; server 192.168.1.24:8088; server 192.168.1.23:8088; } 用户访问图片的时候,就有60% 的几率显示为找不到文件. 问题: 怎么配置成以下功能: 1.连接图片服务器时,如果说浏览的机器在2

URL不变的情况下,最实用的vue刷新当前页面,provide / inject 组合 方式实现vue页面刷新

原文:https://blog.csdn.net/Dream_xun/article/details/83024487 其他参考:https://blog.csdn.net/liyunkun888/article/details/89022149   由于 router-view 是复用的,单纯的改变 id 的值并不会刷新 router-view 这是一种最实用的vue刷新当前页面,其他方式一般会出现一个瞬间的空白页面,体验不好,相当于按ctrl+F5 强制刷新那种方式:provide / in

vue-cli,history 与 tomcat服务器,刷新404,请求资源404,解决办法

前文:CSDN也发布了相同文章,https://blog.csdn.net/qq_41797950/article/details/104373743. 问题:vue-cli,路由history,tomcat服务器,刷新404问题,刷新后请求资源路径不对. 配置:vue-cli:版本2.9.6服务器:tomcat 注:仅是本项目的解决办法,可以参考,希望能帮到大家 1- config文件夹index.js,build下的 assetsPublicPath 改为 ‘/ec/’,名字根据项目自己定义

vue部署docker下的nginx刷新404问题及解决方案

环境描述 本次环境是通过jenkins编译npm run build 或者UMI_ENV=dev umi build 生成dist目录通过Dockerfile build一个新镜像上传私服通过swarm集群service运行镜像,使用与swarm一个net下的nginx代理访问的. [[email protected] DEV-sk_platform_brand_common]# cat DockerfileFROM basic-registry.xxxx.com/skong/nginx###继

nginx+vue+thinkphp5.1部署,解决前端刷新404,以及前端404解决后,后台又404的问题

宝塔的话直接在网站的伪静态一栏中如下就行 location /admin { if (!-e $request_filename){ rewrite ^(.*)$ /index.php?s=$1 last; break; } } location / { try_files $uri $uri/ /index.php; } 原文地址:https://www.cnblogs.com/ilovepan/p/10298003.html

VUE页面刷新404

1.配置nginx(nginx和项目要在一台机器上) 当访问vue页面时,直接访问url会被http server直接解析到该文件路径,但是spa的路由是虚拟的,并不能直接找到这个file,所以会404: 需要把所有的请求全部指向(不知道这么说是不是准确)index,然后让js的router解析url, nginx 需要配置 try_files $url /index.html (出现该问题的原因,可查看HTML5 History 模式:https://router.vuejs.org/zh/g

宝塔服务器配置nginx刷新404的问题汇总

我们在本地使用vue测试和切换页面没有任何问题.于是打包好文件并上传到服务器,页面可以正常打开,但是一刷新就会出现页面404,这种情况我们该怎么办呢? 首先分析问题 这种原因多数情况是因为vue中的router模式设置为history模式,页面url切换的跟随着路由切换, 但刷新时浏览器并不知道你的网页输入的参数地址是想要访问什么,并没有找到你想要访问的文件目录,所以会报错404: 分析清楚问题之后我们应该怎么办呢? 一.切换hash模式 直接在进入route路由请求也,把route模式改为ha