当前位置:   article > 正文

在使用vue router把模式改成history时,刷新404问题解决方案_router history模式 404

router history模式 404

在这里插入图片描述
如果我们在这边模式是用history,部署到ng上面就第一次页面不会出现问题,刷新页面就会出现404,有以下解决方案

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

location /{
        root   /data/nginx/html;
        index  index.html index.htm;
        error_page 404 /index.html;
}
  • 1
  • 2
  • 3
  • 4
  • 5

方案二

这有两种,可以试试

location / {
            alias easyctid_manage_source/dist/; 
            try_files $uri $uri/ /index.html;
        }
  • 1
  • 2
  • 3
  • 4

在这里插入图片描述

location /{
    root   /data/nginx/html;
    index  index.html index.htm;
    if (!-e $request_filename) {
        rewrite ^/(.*) /index.html last;
        break;
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

方案三 (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;
        }
        #.......其他部分省略
  }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家小花儿/article/detail/619415
推荐阅读
相关标签
  

闽ICP备14008679号