使用 vue3 路由重新加载页面时出现错误 404

Posted 2023-02-22

【中文标题】使用 vue3 路由重新加载页面时出现错误 404

【英文标题】：Error 404 on page reload with vue3 routing

【发布时间】：2021-06-05 10:45:54

【问题描述】：

问题

当我在 vue3.js 中对路径（例如 /installer）点击重新加载时，我收到以下错误：

代码

我将Router 与以下设置一起使用：

const router = createRouter(
  history: createWebHistory(process.env.BASE_URL),
  routes,
);

其他信息

（我不使用 createWebHashHistory 来删除 url 中的主题标签）

当我去路线时，我也会收到这个错误，例如/installer，直接而不是通过链接。

问题

如何解决这个错误？

【参考方案1】：

这和你的服务器配置有关，通读this section from the docs：

... 不过问题来了：由于我们的应用程序是单页客户端应用程序，没有适当的服务器配置，如果用户直接在浏览器中访问https://example.com/user/id，将会收到 404 错误。现在这很难看。不用担心：要解决此问题，您需要做的就是向您的服务器添加一个简单的包罗万象的后备路由。如果 URL 不匹配任何静态资源，它应该提供与您的应用相同的 index.html 页面。再次漂亮！

The section below it针对不同的服务器给出了不同的例子。

---

它建议为 Express 服务器使用 connect-history-api-fallback 包，但我一直只是使用它，它工作正常：

if (process.env.NODE_ENV === 'production') 
    // Handle SPA
    app.get(/.*/, (req, res) => res.sendFile(__dirname + '/public/index.html'));