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

sanyang 发布于2019-07-25 14:28 / 1994人阅读

摘要：模式下，中存在，用模式就能解决这个问题。但是模式会出现刷新页面后，页面出现。解决的办法是用配置一下。

vue hash模式下，URL中存在"#"，用"history"模式就能解决这个问题。但是history模式会出现刷新页面后，页面出现404。解决的办法是用nginx配置一下。
在nginx的配置文件中修改

方法一：

location /{
    root   /data/nginx/html;
    index  index.html index.htm;
    if (!-e $request_filename) {
        rewrite ^/(.*) /index.html last;
        break;
    }
}

方法二：
vue.js官方教程里提到的https://router.vuejs.org/zh/g...

  server {
        listen       8081;#默认端口是80，如果端口没被占用可以不用修改
        server_name  myapp.com;
        root        D:/vue/my_app/dist;#vue项目的打包后的dist
        location / {
            try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
            index  index.html index.htm;
        }
        #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
        #因此需要rewrite到index.html中，然后交给路由在处理请求资源
        location @router {
            rewrite ^.*$ /index.html last;
        }
        #.......其他部分省略
  }

云服务器 GPU云服务器访问出现404问题服务器请求出现404 cdn刷新缓存报404 设置404页面

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

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

配置nginx解决vue路由history模式下刷新404问题

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

stormzhang 2019-07-25 14:27 评论0 收藏0
Vue应用部署到服务器的正确方式

Vue应用部署到服务器的正确方式很多时候我们发现辛辛苦苦写的VueJs应用经过打包后在自己本地搭建的服务器上测试没有什么问题，但真正放在服务器上后，会发现或多或少的问题，比如：页面出现空白现象，获取资源路径不对等，我相信以VueJs为技术栈来进行前端开发的小伙伴或多或少都会遇到这样的问题，我也遇到过，那现在我们就来一一解决这样的问题。如何打包基于Vue-Cli,通过npm run build...

xcc3641 2019-08-20 18:00 评论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