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。
javascript 复制代码
"homepage": "https://<Github用户名>.github.io/<Github仓库名>"

举例:

javascript 复制代码
"homepage": "https://ling08140814.github.io/myCarousel"
4、在vite.config.js配置base。
javascript 复制代码
base: "/<Github仓库名>/"

举例:

javascript 复制代码
base: "/myCarousel/"
5、在Github Actions 创建 workflow,生成.yml文件,进行构建。

5.1 新建workflow

5.2 选择workflow

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

替换内容:

javascript 复制代码
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                # 使用的工具

      - name: Install and Build                  # 第二步:下载依赖和构建
        run: |
          npm install
          npm run build

      - name: Deploy                           # 第三步:部署
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          folder: dist                         # 部署的目录
          branch: deploy                       # 部署到哪个分支

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

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

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

7、输入第3步中homepage的路径,可以正常访问啦。
相关推荐
数字化顾问7 小时前
GitHub热榜项目 - 日榜之应用场景与未来发展趋势
github
CoderJia程序员甲8 小时前
GitHub 热榜项目 - 日榜(2025-09-13)
ai·开源·大模型·github·ai教程
逛逛GitHub10 小时前
1 个神级智能问数工具,刚开源就 1500 Star 了。
sql·github
梦想CAD控件11 小时前
(在线CAD平台)网页集成CAD SDK的方法
前端·javascript·github
杨杨杨大侠14 小时前
Atlas Mapper 教程系列 (4/10):高级映射技巧与类型转换
java·开源·github
杨杨杨大侠14 小时前
Atlas Mapper 教程系列 (3/10):核心注解详解与基础映射
java·开源·github
杨杨杨大侠14 小时前
Atlas Log 0.2.0 版本
java·github·apache log4j
绝无仅有15 小时前
大厂Redis高级面试题与答案
后端·面试·github
绝无仅有15 小时前
面试问题之导致 SQL 查询慢的原因及优化建议
后端·面试·github
超人不会飛17 小时前
Vue markdown组件 | 流式 | 大模型应用
前端·javascript·github