• 技术文章 >web前端 >js教程

    vue路由history模式刷新页面时出现404问题的两种解决方法

    不言不言2018-10-12 16:48:59转载6327
    本篇文章给大家带来的内容是关于vue路由history模式刷新页面时出现404问题的两种解决方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

    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;
            }
            #.......其他部分省略
      }

    以上就是vue路由history模式刷新页面时出现404问题的两种解决方法的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:segmentfault思否,如有侵犯,请联系admin@php.cn删除
    专题推荐:nginx vue-router vue.js
    上一篇:浅谈Javascript中数组对象的常用属性 下一篇:Ajax请求中的async:false/true(同步/异步)的作用
    大前端线上培训班

    相关文章推荐

    • Vue路由钩子及应用场景的实例详解• 详解vue路由嵌套的SPA实现步骤• Vue路由钩子的实战使用教程• 关于vue路由的使用解析• 如何解决Vue路由History mode模式中页面无法渲染• vue路由拦截及页面跳转设置的方法介绍

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网