Github Actions 构建Vue3 + Vite项目

ling081408142024-07-13 23:19

本篇文章以自己创建的项目为例，用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里的部署分支保持一致

Github Actions 构建Vue3 + Vite项目

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

具体步骤：

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

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

3、在package.json配置homepage。

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

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

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

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