Vue3 是一个当前非常流行的Web前端框架，可以帮助我们构建现代化的Web应用程序。在Vue3中，Vite是一个新的构建工具，它可以更快地构建我们的应用程序。
GitHub Pages是一个免费的静态网站托管服务，可以帮助我们将我们的Vue3应用程序部署到互联网上。它直接从 GitHub 上的仓库获取 HTML、CSS 和 JavaScript 文件，通过构建过程运行文件，然后发布网站。
最近练习使用 Vue3 实战开发，基于最新的 Vue 生态开发了一个高仿网易云PC端播放器的 Web项目。为了方便交流与访问，尝试了一下把项目部署到GitHub Pages，特此做一下记录。
GitHub：https://github.com/LeoJ340/vue3-music⭐⭐⭐
本地项目准备
首先，我们先准备好一个基于 Vite 构建的web项目。在项目根目录中的 vite.config.ts 文件来配置 Vite，我们可以在此文件中指定构建输出目录和公共路径等选项。以下是一个基本的Vite配置示例：
// vite.config.js
export default {
base: '/vue3-music/',
build: {
outDir: 'docs'
}
}构建应用程序
接下来，我们可以使用 Vite 来构建打包我们的应用程序。我们可以使用以下命令来构建应用程序：
npm run build
or
yarn build该命令将使用 Vite 构建我们的应用程序，并将其输出到我们在配置文件中指定的目录中。
部署到GitHub Pages
最后，我们需要将我们的应用程序部署到GitHub Pages上。我们可以使用以下步骤来完成：
- 在GitHub上创建一个新的仓库，并将其命名为 vue3-music（与我们在 vite.config.ts 配置中设置的公共路径相同）。
- 在我们的Vue3项目根目录中，使用 Git 命令将我们的应用程序源代码推送到GitHub仓库中：
git init
git add .
git commit -m "init"
git remote add origin https://github.com/[你的github用户名]/vue3-music.git
git push -u origin master- 在GitHub仓库的设置中，启用GitHub Pages
关于发布源的设置，可以在将代码推送到特定分支时发布站点，也可以编写 GitHub Actions 工作流来发布站点。在这个项目中，我选择设置为master分支的/docs目录。
同样，你可以选择仓库的其他分支。例如，使用 gh-pages 更自动化的发布到GitHub上的gh-pages分支(或任何其他分支)。
404异常
当我们成功部署到GitHub Pages后，我们打开地址访问到了页面，可能觉得万事大吉了。
但是，当你刷新页面后：WTF？？？我页面呢？？？
这是因为当我们使用history模式设置路由，又在项目首页设置为多层嵌套路由时。GitHub Pages服务器是无法处理路由请求的，因此会返回404错误页面。
为了解决这个问题，我们可以在项目中新增一个404.html，并拷贝index.html的内容。这样刷新页面会回到首页。
总结
在本文中，我们讨论了如何使用Vite构建Vue3应用程序，并将其部署到GitHub Pages上。如果您正在学习Vue3并想将您的应用程序部署到互联网上，那么使用Vite和GitHub Pages是一个非常好的选择。