使用 vue3 路由重新加载页面时出现错误 404 [英] Error 404 on page reload with vue3 routing

问题描述

问题

当我在 vue3.js 中点击重新加载路由时，例如/installer，我收到以下错误:

When I hit reload on a route, e.g /installer, in vue3.js I get the following error:

代码

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

I use the Router with the following setup:

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

其他信息

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

(I don't use createWebHashHistory to get rid of the hashtags in url)

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

I also get this error when I go to the route, e.g. /installer, directly and not via link.

问题

如何解决这个错误?

推荐答案

这与你的服务器配置有关，请通读 文档中的这一部分:

This is to do with your server configuration, read through this section from the docs:

... 但是，这里出现了一个问题:由于我们的应用程序是单页客户端应用程序，没有适当的服务器配置，如果用户访问 https://example.com/user/id 直接在他们的浏览器中.现在这很丑陋.不用担心:要解决这个问题，您需要做的就是向您的服务器添加一个简单的全能回退路由.如果 URL 与任何静态资源都不匹配，则它应该提供与您的应用所在的 index.html 页面相同的页面.再次美丽！

... 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 gives different examples for different servers.

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

It suggests using the connect-history-api-fallback package for an Express server, but I've always just used this which works fine:

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

这篇关于使用 vue3 路由重新加载页面时出现错误 404的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！