526互联

BrowserRouter刷新404解决方案

发布时间 2023-07-14 17:43:21作者: 青云码上

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 也可以使用此方法