分类 标签 存档 程序员漫画 黑壳相关站点 订阅 搜索

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

286 浏览2 评论

本文由黑壳博客原创

本文来源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 中国大陆许可协议 进行许可。

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

评论  
2 评论
easyui • 2019-05-14
回复 删除

的撒打算的

easyui • 2019-05-14
回复 删除

的撒打算的的撒打算的的撒打算的

推荐阅读