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

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

    不言 不言 2018-10-12 16:48:59 转载 1247
    本篇文章给大家带来的内容是关于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中文网其它相关文章!

    第七期线上培训班
    专题推荐: nginx vue-router vue.js
    上一篇:浅谈Javascript中数组对象的常用属性 下一篇:Ajax请求中的async:false/true(同步/异步)的作用

    相关文章推荐

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

    全部评论我要评论

  • 取消 发布评论 发送
  • PHP中文网