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的路径,可以正常访问啦。
相关推荐
寻月隐君1 小时前
想用 Rust 开发游戏?这份超详细的入门教程请收好!
后端·rust·github
SoFlu软件机器人3 小时前
Cursor、飞算JavaAI、GitHub Copilot、Gemini CLI 等热门 AI 开发工具合集
人工智能·github·copilot
Albert_Lsk10 小时前
【2025/07/11】GitHub 今日热门项目
人工智能·开源·github·开源协议
心.c12 小时前
后台管理系统-权限管理
javascript·react.js·github
一点一木12 小时前
🚀 2025 年 06 月 GitHub 十大热门项目排行榜 🔥
前端·人工智能·github
寻月隐君13 小时前
Rust 错误处理终极指南:从 panic! 到 Result 的优雅之道
后端·rust·github
b1ng13 小时前
新人程序员 Git 一站式指南
git·github
叶怀生14 小时前
Github创建仓库并通过VS Code推送项目
github
ai小鬼头1 天前
AIStarter新版重磅来袭!永久订阅限时福利抢先看
人工智能·开源·github
如何原谅奋力过但无声1 天前
上传GitHub步骤(自用版)
github