• 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;
            }
        }

     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;
            }
            #.......其他部分省略
      }
    

      


    ————————————————
    版权声明:本文为CSDN博主「tony_xf」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/u011025083/java/article/details/80352301

  • 相关阅读:
    Python变量、标识符
    PyCharm中设置作者信息
    去中心化
    复杂逻辑---取数
    行政机构处理
    2020.11案例分析
    中间表
    软考--项目管理名词
    软考--近6次上午考点分析
    软考--学习方法、做题方法
  • 原文地址:https://www.cnblogs.com/Lolita-Q/p/12888566.html
Copyright © 2020-2023  润新知