将Vue3项目部署到Github Pages

1. 创建vue3项目

$ npm init vue@latest

初始化工程，并验证。

2. 创建github仓库

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

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目录下

再将项目进行一次提交（之后每次提交执行都执行下面命令即可）

$ 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/