1.创建vue项目

npm create vite@latest my-vue-app -- --template vue

2.创建github仓库

3.连接仓库

在项目根目录右键选择open git base here，如果没有安装git请先安装git。

初始化仓库

$ git init
$ git add .
$ git commit -m "init"

将项目与仓库连接

$ git remote add origin ‘你仓库地址’

将vue项目推送到远程仓库

$ git push --force origin master

4.修改vue文件配置

打开vite.config.ts,添加一行base属性。（为了找到你的文件路径）

export default defineConfig({base: '/zwBlog/',// 你的仓库名称
})

5.部署项目

命令行输入打包命令

npm run build

将.gitignore文件中的dist文件注释掉（将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)文件夹。

大功告成！！