首页 / js教程

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

    作者:PHP中文网2018-10-12 16:48:59

    php中文网赞助会员
    本篇文章给大家带来的内容是关于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中文网其它相关文章!

    标签:

PHP中文网

未登录