利用GitHub Pages快速部署前端框架静态网页

前言

可以先参考：

使用 GitHub Pages 快速部署静态网页: https://blog.csdn.net/m0_64289188/article/details/146493123

GitHub Pages 来部署前端框架（Vue 3 + Vite）项目

1、配置 GitHub Pages 部署

1. 安装 gh-pages 包：
   这个包用于将构建好的项目推送到 GitHub 仓库的 gh-pages 分支。

   npm install --save-dev gh-pages
   

2. 修改 vite.config.js 配置：
   在 vite.config.js 中配置 base 路径，以便正确处理部署时的路径：

   export default defineConfig({
     base: '/my-vue-project/', // 这里的 'my-vue-project' 为你的 GitHub 仓库名称
     plugins: [vue()]
   });
   

3. 修改 package.json 配置：
   在 package.json 中添加 homepage 字段和部署脚本：

   "scripts": {
     "deploy": "gh-pages -d dist"
   }
   

   将 <your-username> 替换为你的 GitHub 用户名。

当运行 npm run deploy 其实就是运行 gh-pages -d dist。

2、将项目推送到 GitHub

1. 在 GitHub 创建一个新的仓库（例如 my-vue-project）。
2. 初始化 Git 仓库并推送本地代码到 GitHub：

   git init
   git add .
   git commit -m "Initial commit"
   git remote add origin https://github.com/<your-username>/my-vue-project.git
   git branch -M main
   git push -u origin main
   

3、部署到 GitHub Pages

1. 运行以下命令进行部署：

   npm run build
   npm run deploy
   

2. 这会将 dist 文件夹推送到仓库的 gh-pages 分支。

4、访问部署页面

完成部署后，访问以下 URL 来查看你的项目：

https://<your-username>.github.io/my-vue-project/

5、修改代码后的更新部署顺序

简单来说，每次修改代码后的完整流程是：

npm run build        # 构建最新静态文件

git add .            # 添加修改到 Git
git commit -m "msg"  # 提交修改
git push origin main # 推送代码到 main 分支

npm run deploy       # 部署到 gh-pages 分支

❤觉得有用的可以留个关注❤