记录：Vite项目搭建及使用GitHub Action将其发布到Github Pages实践、问题及解决方案

记录实践、问题及解决方案

VS Code 1.59.0
“vite”: “^2.4.4”
“vue”: “^3.0.5”

1.Vite项目搭建

1.1.构建

这一部分参看 vitejs 官方文档¹选用以下命令完成项目搭建。

yarn create vite 项目名 --template vue-ts

1.2.Volar插件

VSCode安装插件Volar

1.2.1.问题

使用时出现command 'volar.action.splitEditors' not found

1.2.2.解决方案

1. 参照Github issues²更新Volar插件，VSCode当时版本并非最新插件无法更新。
2. 更新VSCode到项目构建当前最新1.59.0，重新安装插件Volar解决。

2.使用GitHub Action将其发布到Github Pages

2.1.设置GitHub Token

登录Github后- 右上角头像-Settings-Developer settings -Personal access tokens-Generate new token

1. 设置Note：GITHUB_TOKEN ，这里的Note名需要和yml中的保持一致。
2. 设置过期时间。
3. 勾选workflow后保存。

2.2.编写yml文件

文件路径：项目名/.github/workflows/ci.yml³

name: ci

on:
  # 每当 push 到 main 分支时触发部署
  push:
    branches: [main]
  # 手动触发