页面未找到 - React/Vite 应用在 GitHub Pages 上路由不正确。

Question

页面未找到 - React/Vite 应用在 GitHub Pages 上路由不正确。

reactjssingle-page-applicationgithub-pagesvite

3

我将我的应用部署到了gh-pages，根路径可以访问，但是每当我重定向或者尝试添加到根路径时，就会得到一个页面未找到的错误。在本地测试是可以正常工作的。

有人建议将<BrowserRouter>改为<HashRouter>，但这并没有帮助。我也看到过并使用了一个create-react-app或webpack的解决方案，其中你需要在public目录下的index.html文件中添加一些代码以及一个404.html，但问题是vite具有不同的文件结构。

在一个vite应用程序中，如果public目录为空，那么我该把它们放在哪里呢？它确实有一个dist文件夹，其中包含一个index.html，但我不确定是否应该将其用作解决方案。

我不确定需要展示哪些代码，但是这是我的main.jsx和App.jsx文件：

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

function App() {
  return (
    <Router>
      <Header />
      <div className="app">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/example" element={<Example />} />
        </Routes>
      </div>
    </Router>
  );
}


ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

再次强调，本地环境下这个可以工作，但是在部署到 gh-pages 后，根目录或首页可以工作，但是没有扩展路由。就像我说的，我之前在使用 webpack 时也遇到了类似的问题，但是那里的解决方案对于 vite 并不适用，因为它们的文件结构不同，所以我不确定如何添加正确的文件。

编辑：我还看到了一个 Github issue，其中一个用户遇到了类似的问题，解决方案是在 vite.config.js 中定义路由，但是不同的是该用户为每个组件/路由都有多个 index.html 文件。而我只有标准的 <BrowserRouter> 包装我的路由。

- Yehuda

这个回答解决了你的问题吗？在部署到Github Pages时React-Router出现了问题？ - Moshe Katz

2个回答

1

这里的主要问题是理解 GH 页面如何提供静态文件。如果没有与给定 URL 匹配的文件，它会自动提供 404.html。因此，我们只需要有一个与从 vite 构建中获取的 index.html 内容相同的 404.html。

因此，您所需做的就是将 index.html 复制到 dist 目录下的 404.html 中。

我不确定您如何管理 GH 页面发布。

如果您使用Github Actions，请添加自定义步骤以将index.html复制到404.html。
```
cp ./dist/index.html ./dist/404.html
```
如果您使用gh-pages分支，我认为在将更改推送到分支之前，应该将index.html复制到404.html。

我创建了一个公共代码库，你可以参考一下。 https://github.com/richard929/vite-gh-pages-example

我使用了 react-router v6 和 github actions 来发布 GH pages。希望你已经了解了在将 Vite 应用程序部署到静态网站时，vite 的 base 配置。

- Richard Zhan

在部署 gh-pages 时，它会运行 npm run build 命令，从而创建一个新的 dist 文件夹。我该如何在生产环境中保留这个文件夹中的文件？ - Yehuda

我认为这取决于部署到生产环境的方式。如果您使用管道，您可以随时扩展它以添加自定义步骤。如果您手动执行此操作，则没有问题，我想。 - Richard Zhan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Yehuda · Accepted Answer

在公共文件夹中添加一个404.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Page Not Found</title>
    <script>
      sessionStorage.redirect = location.href;
    </script>
    <meta http-equiv="refresh" content="0;URL='/'" />
  </head>
  <body></body>
</html>

这段JS代码位于根目录下的index.html文件中，在闭合的</body>标签之前：

    <script>
      (() => {
        const redirect = sessionStorage.redirect;
        delete sessionStorage.redirect;
        if (redirect && redirect !== location.href) {
          history.replaceState(null, null, redirect);
        }
      })();
    </script>

最后重新配置 vite.config.js 文件：

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, "index.html"),
        404: resolve(__dirname, "public/404.html"),
      },
    },
  },
});