在将 Vue 3 应用部署到 GitHub Pages 后，遇到 404 错误通常是由于 GitHub Pages 处理路由时的问题。Vue 3 使用 Vue Router 来管理前端路由，而 GitHub Pages 本身是静态托管服务，不支持处理 SPA（单页面应用）的客户端路由。因此，当你直接访问某个页面 URL（比如 https://yourusername.github.io/your-repo/some-page）时，GitHub Pages 会尝试查找一个实际的文件或目录，而不是通过 Vue Router 渲染该页面，导致 404 错误。
为了解决这个问题，你可以按照以下步骤操作：
1. 设置 base 路径
在 Vue 项目中，设置 base 路径是解决 GitHub Pages 路由问题的关键。你需要在 vue.config.js 中配置 publicPath，指向你项目的 GitHub Pages 路径。
在根目录下创建或修改 vue.config.js 文件，添加以下内容：
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/your-repo-name/' // 这里替换成你的仓库名称
: '/',
}
注意：/your-repo-name/ 是你项目的 GitHub 仓库名。例如，如果你的 GitHub 仓库是 my-project，那么路径应该是 /my-project/。
在开发环境中，publicPath 会保持为 /，以便本地开发时使用。
2. 配置 Vue Router 的 history 模式
如果你在 Vue 中使用 Vue Router，并且选择了 history 模式，你还需要做一些调整。history 模式会使用 HTML5 的 History API 来管理路由，但它依赖服务器的支持来处理刷新和跳转到页面时的 URL。GitHub Pages 不支持这种处理，所以你需要将 Vue Router 切换回 hash 模式，避免 URL 中出现 history 模式下的路径。
在 router/index.js 中配置 Vue Router：
const router = createRouter({
history: createWebHashHistory(), // 使用 hash 模式
routes: [
// 你的路由配置
],
})
这样，在 GitHub Pages 上部署后，所有的路由都会带上 #（例如：https://yourusername.github.io/your-repo/#/some-page），这能避免 404 错误。
3. 构建并部署
最后，构建项目并将构建结果部署到 GitHub Pages。可以通过以下命令生成生产构建：
npm run build
然后将 dist 文件夹中的内容推送到 GitHub 仓库的 gh-pages 分支或相应的分支，以使 GitHub Pages 服务于这些构建文件。
例如，你可以使用 gh-pages npm 包来自动化此过程：
npm install gh-pages --save-dev
然后在 package.json 中配置部署命令：
"scripts": {
"deploy": "npm run build && gh-pages -d dist"
}
运行部署命令：
npm run deploy
这样，Vue 3 应用就可以正确部署到 GitHub Pages 上，并且不会再遇到 404 错误。
总结
在 vue.config.js 中设置 publicPath 为 /your-repo-name/。
在 Vue Router 中使用 hash 模式来避免 history 模式的路由问题。
通过 gh-pages 部署到 GitHub Pages。
这些步骤应该能解决你的问题，让 Vue 3 应用在 GitHub Pages 上顺利运行。
发布者：myrgd，转载请注明出处：https://www.object-c.cn/4957
