Vue路由器在部署到github页面时不工作

Question

我在gh页面上托管并部署了我的网站，但我的路由有一些问题。

通过顶部的导航菜单浏览页面效果良好：导航菜单

但是，如果我刷新页面，页面会抛出404错误，尽管URL保持不变(即https://[username].github.io/[repo-name]/about(。或者，如果我键入该URL，我也会收到404错误。这在我的主页(https://[username].github.io/[repo-name]/(上没有发生，只有其他所有页面。

这是我的路由代码：

import { createRouter, createWebHistory } from 'vue-router';
import Portfolio from './views/portfolio.vue';
import About from './views/about.vue';
import Doodleboard from './views/doodleboard.vue';
const routes = [
{
path: '/',
name: 'portfolio',
component: Portfolio,
meta: {title: 'arissa's portfolio'}
},
{
path: '/about',
name: 'about',
component: About,
meta: {title: 'about'}
},
{
path: '/doodleboard',
name: 'doodleboard',
component: Doodleboard,
meta: {title: 'doodleboard'}
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
})

router.beforeEach((to, from, next) => {
document.title = to.meta.title;
next();
});
export default router;

在我的Navigation.vue文件中，这是导航菜单中的一行：

<router-link :to="{name: 'portfolio'}">portfolio</router-link>
<router-link :to="{name: 'about'}">about</router-link>
<router-link :to="{name: 'doodleboard'}">doodle board</router-link>

如果我在本地主机上运行这个，我可以刷新页面，不会有错误。此错误仅在部署到gh页面时显示

Answer 1

Github页面不支持SPA。

使用哈希模式而不是web历史记录。

结果是，如果您第一次刷新/加载URL，例如/blog/my-first-post，github不知道如何处理。

它以https://<Username>.github.io/<Repo>的模式工作。

Answer 2

您应该使用Netlify进行SPA。