1. 创建vue3项目
$ npm init vue@latest
初始化工程，并验证。
image.png
2. 创建github仓库
image.png
3. 连接vue项目到github仓库
打开vue项目根目录，初始化本地git仓库
$ git init
$ git add .
$ git commit -m "init"
连接vue项目到第二步创建的github仓库
$ git remote add origin https://github.com/AwangLL/vue-demo.git
将vue项目push到远程仓库
$ git push --force origin master
image.png
4. 修改vue项目相关文件
修改vite.config.ts，添加base属性，值为/仓库名/，例如本例就是/vue-demo/
export default defineConfig({
// ...
base: "/vue-demo/"
})
5. 部署项目（方案1）
将项目build文件的输出目录改为docs目录，修改vite.config.ts，添加build属性
export default defineConfig({
// ...
build: {
outDir: "docs"
}
})
打开github仓库的setting配置，选择Pages配置项，Source项选择Deploy from a branch，Branch项选择master分支下的/docs文件夹。
继续用命令行打开vue项目根目录，输入命令
$ npm run build
项目的打包文件就在docs目录下
image.png
再将项目进行一次提交（之后每次提交执行都执行下面命令即可）
$ git add .
$ git commit -m "test 1"
$ git push origin master
5. 部署项目（方案2）
用命令行打开vue项目根目录，输入命令
$ npm run build
将.gitignore文件中的dist文件注释掉
...
node_modules
.DS_Store
# dist
dist-ssr
coverage
*.local
...
再将项目进行一次提交（之后每次提交执行都执行下面命令即可）
$ git add .
$ git commit -m "test 2"
$ git push origin master
$ git subtree push --prefix dist origin gh-pages
打开github仓库的setting配置，选择Pages配置项，Source项选择Deploy from a branch，Branch项选择gh_pages分支下的/(root)文件夹。
6. 验证
访问https://user.github.io/repo，user为github用户名，repo为github仓库名，例如本例的地址为https://awangll.github.io/vue-demo/
