BrowserRouter刷新404解决方案

青云码上

于 2023-07-14 17:38:00 发布

阅读量1.7k

点赞数

本文链接：https://blog.youkuaiyun.com/qq_21363577/article/details/131734392

版权

在本地开发中，可以通过在js脚本的webpackserve命令添加--history-api-fallback来支持history模式。在生产环境中，若遇到刷新页面404的问题，可修改nginx配置，设置try_files指令将所有未找到的文件重定向到index.html，确保单页应用的正常运行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、本地开发环境

在js脚本命令里加上 --history-api-fallback

"scripts": {
    "serve": "webpack serve --config webpack.dev.js --history-api-fallback"
}

2、生产环境，可以修改 nglnx 配置：

server {
    listen XXXX; //端口号
    server_name XXX.XXX.XXX.XXX; //本机IP地址
    location /{
        root dist; //打包后的项目路径
        index index.html index.htm; //默认访问的页面
        try_files $uri $uri/ /index.html; // 解决刷新页面变成404问题的代码
    }
}

vue使用 history 模式 404 也可以使用此方法