vue刷新404

Euphoria 发布于2019-08-26 18:18 / 3008人阅读

摘要：部署完成后，访问首页没问题，从首页里打开二级页面没问题，但是所有的二级页面打开后，再次刷新，就会出现现象问题原因刷新页面时访问的资源在服务端找不到，因为设置的路径不是真实存在的路径。

1. 问题描述

利用vue-route结合webpack编写了一个单页路由项目，运维协助在服务器端配置nginx。部署完成后，访问首页没问题，从首页里打开二级页面没问题，但是所有的二级页面打开后，再次刷新，就会出现404现象！

2. 问题原因：

刷新页面时访问的资源在服务端找不到，因为vue-router设置的路径不是真实存在的路径。

3. 解决方法：

在nginx配置里添加vue-route的跳转设置（这里首页是index.html，如果是index.php就在下面对应位置替换），正确配置如下

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

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

混合云 idc机房托管 cdn刷新缓存报404 网站404 打开404 404

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110182.html

vue路由history模式刷新页面出现404问题

摘要：模式下，中存在，用模式就能解决这个问题。但是模式会出现刷新页面后，页面出现。解决的办法是用配置一下。 vue hash模式下，URL中存在#，用history模式就能解决这个问题。但是history模式会出现刷新页面后，页面出现404。解决的办法是用nginx配置一下。在nginx的配置文件中修改方法一： location /{ root /data/nginx/html...

sanyang 2019-07-25 14:28 评论0 收藏0
42. Vue、React 等前端项目部署，刷新 404 问题解决方案

摘要：发现路径下是静态文件的目录，不是的目录没有文件，就会规则，返回这样浏览器拿到之后，开始加载其中的前端路由部分这时候就会在前端路由中找到匹配规则同理也可以写在前端路由中了首发于我的github博客, 欢迎关注nginx 匹配的 try_file 与前端路由的优先级问题场景描述: 访问www.abc.com，之后点击界面里面的logout，前端路由处理，跳转到www.abc.c...

caiyongji 2019-07-25 14:38 评论0 收藏0
配置nginx解决vue路由history模式下刷新404问题

摘要：在路由模式为的时候，刷新页面会出现问题。我们只需要在服务器配置如果匹配不到任何静态资源，就跳转到默认的。表示你监听的端口号打包后的文件夹目录在vue路由模式为history的时候，刷新页面会出现404问题。我们只需要在服务器配置如果URL匹配不到任何静态资源，就跳转到默认的index.html。 server { listen 8105; // 表示你nginx监听...

stormzhang 2019-07-25 14:27 评论0 收藏0
vue router 刷新404问题

摘要：问题描述单页面应用的项目，设置模式为。可以跳转但刷新了页面，则显示为。但是这种很丑，也不符合对的使用习惯。所以，需要使用另外一个叫模式来实现跳转而无须重新加载页面。服务器配置服务器配置 1. 问题描述单页面应用的vue项目，设置router模式为history。可以跳转但刷新了页面，则显示为404。 vue-router的默认hash模式使用URL的hash来模拟一个完整的URL...

zilu 2019-08-23 14:34 评论0 收藏0
vue项目路由在history模式下布置在Tomcat下解决刷新404问题

摘要：首先打包之前需要修改文件夹下的其次记得要添加路由页面在的下的前端文件夹下新建文件夹，并在该文件夹下建立文件，具体内容如下 1、首先打包之前需要修改config文件夹下的index.js showImg(https://segmentfault.com/img/bVbnqP7?w=872&h=303); 2、其次记得要添加404路由页面 showImg(https://segmentfa...

luckyyulin 2019-08-23 14:48 评论0 收藏0