闲暇时光 🌑
闲暇时光
我の闲暇时光 time flies
静谧时光,执笔抒心,岁月痕迹甚好。
109
21
58



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

2022-06-07 14:37:24 - 2025-07-01 00:28:02
無慕 - 1.62K - 6.92分钟 - 2.28K

vue单页因微信分享和自动登陆须要,对于URL中存在’#’的地址,处理起来比较坑。

用history模式就不会存在这样的问题。可是换成history模式,就会有个新的问题,就是页面刷新后,页面就没法显示了(404)。

对于这个问题,只需要配置网站Nginx就可以了

server {
        listen       8888;#默认端口是80,若是端口没被占用能够不用修改
        server_name  localhost;
        root        E:/vue/my_project/dist;#vue项目的打包后的dist
        
        
        ##############修改配置文件,以上部分应该默认存在,下面两个location是重点#############
        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 问题 笔记 前端
1
鲁ICP备2023049263号-1
© 2020 – 至今 闲暇时光
由 PHP MySQL 开发而成 | 主题 - Yun
upyun