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的路径,可以正常访问啦。
相关推荐
ruanCat1 小时前
使用 vite 的 base 命令行参数来解决项目部署在 github page 的路径问题
前端·github
FreeBuf_2 小时前
Salesloft Drift网络攻击事件溯源:GitHub账户失陷与OAuth令牌窃取
安全·github
第七种黄昏2 小时前
GitHub 项目提交完整流程(含常见问题与解决办法)
github
确定过眼神!3 小时前
GitHub提交到公共项目流程
github·changeset
掘我的金4 小时前
mpc4j 在 macOS M3(Apple Silicon)上的部署实录:JDK 21(Preview)与 FourQ 缺失排错
github
油泼辣子多加5 小时前
[特殊字符] GitHub 热门开源项目速览(2025/09/09)
github
CoderJia程序员甲6 小时前
GitHub 热榜项目 - 日榜(2025-09-09)
ai·开源·大模型·github·ai教程
BillKu7 小时前
下载 Eclipse Temurin 的 OpenJDK 提示 “无法访问此网站 github.com 的响应时间过长”
github·openjdk·eclipse temurin
绝无仅有7 小时前
HTTP面试之实战经验与总结
后端·面试·github
绝无仅有7 小时前
职场面试redis经历之与一位资深技术面试官的技术问答与总结
后端·面试·github