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的路径,可以正常访问啦。
相关推荐
草梅友仁3 小时前
草梅 Auth 与 AI 开发心得 | 2025 年第 27 周草梅周报
github·ai编程·视觉设计
qianmoQ6 小时前
GitHub 趋势日报 (2025年07月02日)
github
A5资源网10 小时前
cloudflare配合github搭建免费开源影视LibreTV一个独享视频网站 详细教程
github
mortimer11 小时前
从零到一:构建一个 Chatterbox-TTS API 服务
开源·github·ai编程
真智AI11 小时前
利用 Claude Opus 4 自动化 GitHub 工作流:从安装到实战详解
运维·自动化·github
寻月隐君15 小时前
Rust 网络编程实战:用 Tokio 手写一个迷你 TCP 反向代理 (minginx)
后端·rust·github
喜欢吃豆16 小时前
快速手搓一个MCP服务指南(九): FastMCP 服务器组合技术:构建模块化AI应用的终极方案
服务器·人工智能·python·深度学习·大模型·github·fastmcp
油泼辣子多加1 天前
2025年06月30日Github流行趋势
github
ai小鬼头1 天前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
寻月隐君1 天前
Rust 异步编程实践:从 Tokio 基础到阻塞任务处理模式
后端·rust·github