如何将vue cli 3.x项目成功部署至GitHub Pages？

本文共计1120个文字，预计阅读时间需要5分钟。

GitHub Pages 是 GitHub 为用户免费提供的服务，可用于搭建博客或部署静态项目。最近尝试将使用 Vue CLI 3.x 初始化的项目部署到 GitHub Pages 上，遇到了一些问题，记录如下：

1. 部署前确保项目中有 `public/index.` 文件。

2.在项目根目录下创建 `.gitignore` 文件，并添加 `node_modules/` 和 `dist/` 文件夹，避免将它们提交到仓库。

3.在 `package.json` 文件中添加或修改 `scripts` 字段，添加如下命令：

json scripts: { build: vue-cli-service build, deploy: gh-pages -d build }

4.在项目根目录下执行 `npm run build` 命令，生成 `dist` 文件夹。

5.在 GitHub 仓库的 Settings 页面中，找到 GitHub Pages 部分，选择分支为 `gh-pages`。

6.在本地执行 `npm run deploy` 命令，将 `dist` 文件夹中的内容上传到 GitHub Pages 仓库。

7.部署成功后，访问 `https://[你的用户名].github.io/项目名` 即可查看部署结果。

github pages 是 github 免费为用户提供的服务，写博客，或者部署一些纯静态项目。

最近将 vue cli 3.x 初始化项目部署到 github pages，踩了一些坑，记录如下。