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)文件夾。

大功告成！！