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

Question

问题

当我在 vue3.js 中的路线（例如 /installer）上重新加载时，出现以下错误：

代码

我使用具有以下设置的路由器：

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

附加信息

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

当我直接而不是通过链接转到路线（例如/installer）时，我也会收到此错误。

问题

如何解决这个错误？

Answer 1

这与您的服务器配置有关，请阅读文档中的本节：

...但是，这里出现了一个问题：由于我们的应用程序是单页客户端应用程序，没有正确的服务器配置，如果用户直接访问https://example.com/user/id ，将收到 404 错误他们的浏览器。现在那太丑了。不用担心：要解决这个问题，您所需要做的就是向您的服务器添加一个简单的包罗万象的后备路由。如果 URL 与任何静态资源都不匹配，它应该提供与您的应用程序所在的相同的 index.html 页面。再次美丽！

下面的部分给出了不同服务器的不同示例。

它建议对 Express 服务器使用connect-history-api-fallback包，但我一直只使用它，效果很好：

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