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

Question

问题

当我在 vue3.js 中的路径(例如/installer)上点击重新加载时，出现以下错误:

代码

我使用 Router使用以下设置:

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

附加信息

(我不使用 createWebHashHistory 来删除 url 中的主题标签)

当我去路线时，我也会遇到这个错误，例如/安装程序，直接而不是通过链接。

问题

如何解决这个错误？

Answer 1

这与您的服务器配置有关，通读this section from the docs :

... Here comes a problem, though: Since our app is a single page client side app, without a proper server configuration, the users will get a 404 error if they access https://example.com/user/id directly in their browser. Now that's ugly. Not to worry: To fix the issue, all you need to do is add a simple catch-all fallback route to your server. If the URL doesn't match any static assets, it should serve the same index.html page that your app lives in. Beautiful, again!

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

---

它建议使用 connect-history-api-fallback用于 Express 服务器的软件包，但我一直只使用它，效果很好:

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