vue-route+webpack部署单页路由项目,访问刷新出现404问题

问题描述: 前端同事使用Vue.js框架,利用vue-route结合webpack编写了一个单页路由项目,运维协助在服务器端配置nginx。部署完成后,访问首页没问题,从首页里打开二级页面没问题,但是所有的二级页面打开后,再次刷新,就会出现404现象!如下:

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

服务端nginx的一开始配置如下(假设域名为:testwx.wangshibo.com): [root@test-huanqiu ~]# 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就在下面对应位置替换),正确配置如下(添加下面标红内容): [root@test-huanqiu ~]# 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后,问题就迎刃而解了。

[总结:nginx配置文件里一定要定义access和error日志,出现问题要第一时间查看日志(error)]

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏转载gongluck的CSDN博客

搭建 FTP 文件服务

安装并启动 FTP 服务 任务时间:5min ~ 10min 安装 VSFTPD 使用 apt-get 安装 vsftpd: sudo apt-get in...

1.2K70
来自专栏BeJavaGod

使用shiro自定义过滤器,拦截ajax请求,可用于动静分离

shiro,不多说了,都知道是权限框架 用过shiro的都知道shiro自己有各种过滤器,只要配置好了就可以自动过滤,自动跳转到对应的页面,比如:认证,授权,退...

64550
来自专栏和蔼的张星的图像处理专栏

3. Jetson TX2--安装,配置pycharm

TX2下anaconda是装不上的,但是pycharm还是可以装的,是一个很好用的IDE,PC端移植就用的是pycharm与spyder进行联合调试,一般习惯于...

47130
来自专栏用户2442861的专栏

利用SecureCRT上传、下载文件(使用sz与rz命令),超实用!

    借助securtCRT,使用Linux命令sz可以很方便的将服务器上的文件下载到本地,使用rz命令则是把本地文件上传到服务器。

25910
来自专栏鸿的学习笔记

日志采集技术笔记

使用Linux的rename机制保证文件写入要么成功,要么失败,绝对不能出现写了一半的情况。

43550
来自专栏小樱的经验随笔

一个很easy的脚本--php获取服务器端的相关信息

存档: 1 <html> 2 <head> 3 <meta http-equiv="content-type" content="...

40080
来自专栏linux运维学习

linux学习第十四篇:查看磁盘,文件大小命令:df,du;磁盘分区

df命令 df:查看已挂载磁盘的总容量、使用容量、剩余容量等,可以不加任何参数,默认是按k为单位显示的。 ? 带有tmpfs的都是临时的文件系统,所以在对应的挂...

23380
来自专栏DeveWork

设置你的Gravatar头像的方法

Gravatar是Globally Recognized Avatar的缩写,是gravatar推出的一项服务,意为“全球公用的头像”。如果在Gravatar的...

29170
来自专栏前端小叙

windows mongodb最常用命令简单归纳

在windows安装好了windows,首先记得要把mongodb bin目录路径放在 系统环境变量的path中,确定之后即配置好了mongo的环境变量,在do...

39360
来自专栏Laoqi's Linux运维专列

rsync 服务方式连接

rsync扩展 : 通过后台服务的方式: 在远程主机上建立一个rsync服务器,将本机作为rsync的客户端。(通常的表现方式为在后面添加 :: ) rsync...

411100

扫码关注云+社区

领取腾讯云代金券