vue 路由 history 模式刷新 404 问题解决方案

本文由黑壳博客原创

本文来源vue路由history模式刷新404问题解决方案

壳叔搞笑时间

内容 

vue单页因微信分享和自动登录需要,对于URL中存在’#’的地址,处理起来比较坑。用history模式就不会存在这样的问题。但是换成history模式,就会有个新的问题,就是页面刷新后,页面就无法显示了(404)。对于这个问题,我们只需要在服务器配置如果URL匹配不到任何静态资源,就跳转到默认的index.html。
我这里是针对nginx的配置,总结如下:

方案一 (这种方式容易被第三方劫持)

location /{
        root   /data/nginx/html;
        index  index.html index.htm;
        error_page 404 /index.html;
}

方案二

    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-cn/essentials/history-mode.html

  server {
        listen       8888;#默认端口是80,如果端口没被占用可以不用修改
        server_name  localhost;
        root        E:/vue/my_project/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;
        }
        #.......其他部分省略
  }

About

程序员太辛苦了

请善待你们身边的每一位程序员~

欢迎在评论写下你的程序员趣事,程序员不是一个死板的职业~~

以上内容,均来自互联网~

欢迎扫描二维码加入我们的小组织 ,大家都叫壳叔,期待你的到来。

Group

黑壳网交流群 Q群:200408242

交流群 来者便是客

黑壳博客 blog.bhusk.com

E-mail:keshu@bhusk.com

本文由 黑壳博客的壳叔 创作或转载,采用 知识共享署名 3.0 中国大陆许可协议 进行许可。

可自由转载、引用,但需署名作者且注明文章

留下你的脚步
推荐阅读