Github Actions 构建Vue3 + Vite项目

本篇文章以自己创建的项目为例，用Github Actions构建。

Github地址：https://github.com/ling08140814/myCarousel

访问地址：https://ling08140814.github.io/myCarousel/

具体步骤：

1、创建一个Vue3的项目，并完成代码开发。

2、在Github创建仓库，并将代码推到仓库。

3、在package.json配置homepage。

"homepage": "https://<Github用户名>.github.io/<Github仓库名>"

 
 

 
 
1

举例：

"homepage": "https://ling08140814.github.io/myCarousel"

 
 

 
 
1

4、在vite.config.js配置base。

base: "/<Github仓库名>/"

 
 

 
 
1

举例：

base: "/myCarousel/"

 
 

 
 
1

5、在Github Actions 创建 workflow，生成.yml文件，进行构建。

5.1 新建workflow

5.2 选择workflow

5.3 打开之后，将.yml默认内容进行替换，然后commit

替换内容：

name: GitHub Actions Build and Deploy Demo        # 大标题
on:
  push:
    branches:
      - master                                   # 监听哪个分支的哪个动作
permissions:
  contents: write                                # 设置权限，可写，也可以不用配置，v4版本新增的
jobs:
  build-and-deploy:                              # 其中一个任务的名称，ID
    runs-on: ubuntu-latest                       # 这个任务运行所需的环境
    steps:
      - name: Checkout                           # 第一步：获取源码
        uses: actions/checkout@v3                # 使用的工具
  <span class="token operator">-</span> name<span class="token operator">:</span> Install and Build                  # 第二步：下载依赖和构建
    <span class="token literal-property property">run</span><span class="token operator">:</span> <span class="token operator">|</span>
      npm install
      npm run build

  <span class="token operator">-</span> name<span class="token operator">:</span> Deploy                           # 第三步：部署
    <span class="token literal-property property">uses</span><span class="token operator">:</span> JamesIves<span class="token operator">/</span>github<span class="token operator">-</span>pages<span class="token operator">-</span>deploy<span class="token operator">-</span>action@v4
    <span class="token keyword">with</span><span class="token operator">:</span>
      <span class="token literal-property property">folder</span><span class="token operator">:</span> dist                         # 部署的目录
      <span class="token literal-property property">branch</span><span class="token operator">:</span> deploy                       # 部署到哪个分支

• 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

5.4 commit之后，会自动构建，构建成功后展示如下内容

6、配置部署分支，进行访问。

部署分支和.yml里的部署分支保持一致

7、输入第3步中homepage的路径，可以正常访问啦。