Github Actions 自动部署前端项目_githuv action打包前端packages: write

GitHub Action持续集成服务，目前已经免费开放使用，由于大部分人的个人项目都是放在Github上，那么使用它来发布、测试、部署，是非常方便的。

最近写了一个基于Vue3 + Vant4 的移动端模板，由于每次想查看线上效果都要手动去打包部署，就去学习了一下Github actions 自动打包发布 项目地址 欢迎 star (^_)

如果对 Github actions 还不了解的可以看一下阮一峰老师这篇文档 参考文档

修改部署配置

1. 在package.json中添加一个homepage字段

"homepage": "https://[username].github.io/github-actions-demo"
1

• 将[username]替换成你的 GitHub 用户名

2. 在vite.config.ts中修改base

export default ({ mode }) => defineConfig({
  base: mode === 'production' ? '/vue3-vite-vant-h5-template/' : '/',
})
1
2
3

• 这需要注意一下，由于github pages默认的地址是包含子目录的，所以我这这需要指定一下 base 的路径为我们的项目名。

配置文件

1. 在这个仓库的.github/workflows目录，生成一个 workflow 文件，名字可以随便取，这个示例是ci.yml

# ci.yml
name: Vue3 Vite Vant H5 Template 
on:
  push:
    branches:
      - main
jobs:
  build-and-deploy:
    concurrency: ci-${{ github.ref }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout 
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/185963