乐趣区

关于前端:Vite构建的Vue3项目部署到GitHub-Pages

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 上。咱们能够应用以下步骤来实现:

  1. 在 GitHub 上创立一个新的仓库,并将其命名为 vue3-music(与咱们在 vite.config.ts 配置中设置的公共门路雷同)。
  2. 在咱们的 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
  1. 在 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 是一个十分好的抉择。

退出移动版