vue项目自动化

前言

近期开发一个好玩的vue2项目，需要部署到github，每次手动打包部署很难受，所以直接通过自动化去解决；这里直接用我之前做的一个模板仓库去做实验：

前期准备

git clone https://github.com/shuangxunian/vue-template.git

cd vue-template

npm install
npm run serve

github

在GitHub上创建一个新的Repository，将项目上传到GitHub仓库。

# 更换远程仓库地址，URL为你的仓库
git remote set-url origin URL

git add .
git commit -m "备注信息"
git push -u origin main

打开自己的仓库，点击仓库名称下面的1 branch，点击右侧new branch，输入分支名：gh-pages，然后点击create new branch

配置 GitHub Actions，点击Setting->Pages，此时可以发现，Build and deployment下面的branch就已经是我们刚刚命名的分支了。

点击Actions -> New workflow -> set up a workflow yourself ，然后在浏览器的编辑器里面添加以下yml代码

name: CI Github Pages
on:
  #监听push操作
  push:
    branches:
      - main # 这里只配置了main分支，所以只有推送main分支才会触发以下任务
jobs:
  # 任务ID
  build-and-deploy:
    # 运行环境
    runs-on: ubuntu-latest
    # 步骤
    steps:
      # 官方action，将代码拉取到虚拟机
      - 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.3.3
        with:
          branch: gh-pages # 部署后提交到那个分支
          folder: dist # 这里填打包好的目录名称

保存即可，然后：

点击Setting -> Actions -> General
在Workflow permissions中，选择Read and write permissions

本地处理

先git pull，拉取最新的分支，在vue.config.js中新加一行publicPath: './'即可。

以后每次push代码，该仓库就会自动打包部署。