1. 創(chuàng)建vue3項(xiàng)目

$ npm init vue@latest

初始化工程，并驗(yàn)證。

image.png

2. 創(chuàng)建github倉庫

image.png

3. 連接vue項(xiàng)目到github倉庫

打開vue項(xiàng)目根目錄，初始化本地git倉庫

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

連接vue項(xiàng)目到第二步創(chuàng)建的github倉庫

$ git remote add origin https://github.com/AwangLL/vue-demo.git

將vue項(xiàng)目push到遠(yuǎn)程倉庫

$ git push --force origin master

image.png

4. 修改vue項(xiàng)目相關(guān)文件

修改vite.config.ts，添加base屬性，值為/倉庫名/，例如本例就是/vue-demo/

export default defineConfig({
  // ...
  base: "/vue-demo/"
})

5. 部署項(xiàng)目（方案1）

將項(xiàng)目build文件的輸出目錄改為docs目錄，修改vite.config.ts，添加build屬性

export default defineConfig({
  // ...
  build: {
    outDir: "docs"
  }
})

打開github倉庫的setting配置，選擇Pages配置項(xiàng)，Source項(xiàng)選擇Deploy from a branch，Branch項(xiàng)選擇master分支下的/docs文件夾。

繼續(xù)用命令行打開vue項(xiàng)目根目錄，輸入命令

$ npm run build

項(xiàng)目的打包文件就在docs目錄下

image.png

再將項(xiàng)目進(jìn)行一次提交（之后每次提交執(zhí)行都執(zhí)行下面命令即可）

$ git add .
$ git commit -m "test 1"
$ git push origin master

5. 部署項(xiàng)目（方案2）

用命令行打開vue項(xiàng)目根目錄，輸入命令

$ npm run build

將.gitignore文件中的dist文件注釋掉

...
node_modules
.DS_Store
# dist
dist-ssr
coverage
*.local
...

再將項(xiàng)目進(jìn)行一次提交（之后每次提交執(zhí)行都執(zhí)行下面命令即可）

$ git add .
$ git commit -m "test 2"
$ git push origin master
$ git subtree push --prefix dist origin gh-pages

打開github倉庫的setting配置，選擇Pages配置項(xiàng)，Source項(xiàng)選擇Deploy from a branch，Branch項(xiàng)選擇gh_pages分支下的/(root)文件夾。

6. 驗(yàn)證

訪問https://user.github.io/repo，user為github用戶名，repo為github倉庫名，例如本例的地址為https://awangll.github.io/vue-demo/