在github的pages上部署一个vue3的项目
# 步骤如下
首先需要准备一个vue3的项目,上传到github上,如图所示,项目自定义就行。
新建一个新的分支,分支名随意就行,这里用的是gh-pages
,清空分支里的所有内容,推到github上去。
接下来就是要设置Action
点图中的New workflow
,随便选一个点进去
然后改下里的内容,给它修改成这样, 点 commit changes
来看下这段yaml的含意
## 定义这个action的名
name: Deploy with Github Pages
## 触发action的条件,
## 当有推送代码时,且分支是 main
## 当有pr时,且分支是 main
on:
push:
branches: [ "main" ]
pull_request:
branches: [ "main" ]
permissions:
contents: write
jobs:
build:
concurrency: ci-${{ github.ref }}
runs-on: ubuntu-latest
steps:
## 检出代码
- name: Checkout 🛎️
uses: actions/checkout@v3
## 打包
- name: Install and Build 🔧
run: |
npm install
npm run build
## 将打包完的dist下的文件推送到gh-pages分支
- name: Deploy to GitHub Pages 🚀
id: deployment
uses: JamesIves/github-pages-deploy-action@v4
with:
branch: gh-pages
folder: dist
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
这一步完事后,每次提交代码就会看到在action里有自动构建。构建完后gh-pages
分支就有东西了。
设置pages
到这里就是所有的github上的设置了,每次提交代码,就会将代码打包推到gh-pages
分支,然后就能通过提示的url进行访问了。
上次更新: 2024/08/08, 06:59:58