在Webpack生产环境中实现history-api-fallback

Question

我的技术栈是使用 React/Redux 作为前端，同时使用 React Router v4 和 Firebase Hosting 作为后端。

和许多人一样，当用户在类似 https://example.com/about 的页面刷新或手动输入 URL https://example.com/about 时，我也遇到了404页面未找到的问题。

我查阅了许多网站，发现 HashBrowser 可以解决此问题，但它并不完整。它不能将用户带到正确的页面，而是渲染根URL组件。这不够好。在生产环境中使用 historyApiFallback: true 也似乎不是一个好主意。

我看到了这个包 connect-history-api-fallback，但它似乎是针对 Express 应用程序的。

我该如何在使用 Firebase 托管我的网站的情况下，在我的 React 应用程序中实现此包？或者还有其他解决方案吗？

- Seng Wee

---

你是否使用了 firebase-cli 进行部署？如果有的话，它会询问您是否要将其部署为 SPA，这将解决您的问题。但是请确保您先运行 "npm run build" 来获取生成文件夹，然后在 firebase-cli 中指定该文件夹。 - kng

是的，我正在使用firebase-cli来部署我的应用程序。是的，我确实将部署指定为SPA。当我运行“npm run build”时，我只得到bundle.js文件，没有build文件夹。我把所有的文件，即index.html、bundle.js放在“public”文件夹中。为了澄清，build文件夹中应该有哪些文件？ - Seng Wee

Answer 1

我找到了解决方案。这仅适用于使用Firebase Hosting托管单页应用程序的React应用程序部署人员（Angularjs/Vuejs也应该适用）。

当您第一次运行firebase init时，他们会询问您是否要配置为单页应用程序，请确保选择是。最终结果是他们将此部分写入您的firebase.json文件，

"rewrites": [ {
  "source": "**",
  "destination": "/index.html"
} 

它的工作原理与拥有相同

devServer: {
    historyApiFallback: true
},

在你的webpack.config.js文件中，使用以下代码将所有URL重定向到你应用程序的根URL。("/")

完整的firebase.json文件实现可能如下所示：

{
  "hosting": {
    "public": "public",
    "rewrites": [{
      "source": "**",
      "destination": "/index.html"
    }],
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

更多信息可以在Firebase部署配置文档中找到。

- Seng Wee