如何使用 basepath + nginx 部署 React App答案

【问题标题】：How to deploy a React App with basepath + nginx如何使用 basepath + nginx 部署 React App
【发布时间】：2020-09-30 13:18:39
【问题描述】：

大家！

我正在尝试将 React 应用部署到生产环境。

我的情况。

在生产中，我的应用程序将有一个动态的基本路径，我会在构建中更改它。

例子：

example.com/basepath
example.com/basepath2

我的 package.json

...
"scripts": {
 "build:basepath": "PUBLIC_URL=basepath react-app-rewired build",
 "build:basepath2": "PUBLIC_URL=basepath2 react-app-rewired build",
}

在我的路线中使用动态基本路径设置基本名称

我的 nginx.conf

server {
    listen       80;
    server_name  _;

    error_page 400 404 405 =200 @40*_json;

    location @40*_json {
      default_type application/json;
      return 200 '{"code":"1", "message": "Not Found"}';
    }

    location ~ /basepath{
     root   /usr/share/nginx/html;
     try_files $uri /basepath/index.html;
    }

}

我可以通过 example.com/basepath 访问应用程序。它的工作

如果我访问 example.com/basepath/ 会收到一个空白页

访问example.com/basepath，块下载到example.com/basepath/statics/chank....

https://i.imgur.com/OHvMOeH.jpg

访问 example.com/basepath/ 的块 url 是错误的 example.com/basepath/basepath/statics/chank....

https://i.imgur.com/7WyAr7i.png

当应用链接改变路由时，一切正常

https://i.imgur.com/BBUfZWL.jpg

我不知道错误是在 nginx 还是在 react 路由器中

有什么想法？

对不起我的英语，这是我的第一个话题

【问题讨论】：

标签： reactjs nginx

【解决方案1】：

您是否尝试过使用 HashRouter 而不是 BrowserRouter？

【讨论】：

这是一个经过验证的答案，因此在这种情况下它可能是正确的，但如果您再解释一下为什么此更改可以解决问题，它将对未来的用户有所帮助:)