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

文章目录

- 前言
- [GitHub Pages 来部署前端框架（Vue 3 + Vite）项目](#GitHub Pages 来部署前端框架（Vue 3 + Vite）项目)
- - [1、配置 GitHub Pages 部署](#1、配置 GitHub Pages 部署)
  - [2、将项目推送到 GitHub](#2、将项目推送到 GitHub)
  - [3、部署到 GitHub Pages](#3、部署到 GitHub Pages)
  - 4、访问部署页面
  - 5、修改代码后的更新部署顺序

前言

可以先参考：

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

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

1、配置 GitHub Pages 部署

安装 gh-pages 包 ：

这个包用于将构建好的项目推送到 GitHub 仓库的 gh-pages 分支。
bash 复制代码
```
npm install --save-dev gh-pages
```

修改 vite.config.js 配置 ：

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

javascript 复制代码

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

修改 package.json 配置 ：

在 package.json 中添加 homepage 字段和部署脚本：
json 复制代码
```
"scripts": {
  "deploy": "gh-pages -d dist"
}
```
将 <your-username> 替换为你的 GitHub 用户名。

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

2、将项目推送到 GitHub

在 GitHub 创建一个新的仓库（例如 my-vue-project）。

初始化 Git 仓库并推送本地代码到 GitHub：

bash 复制代码

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

运行以下命令进行部署：
bash 复制代码
```
npm run build
npm run deploy
```
这会将 dist 文件夹推送到仓库的 gh-pages 分支。

4、访问部署页面

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

复制代码

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

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

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

bash 复制代码

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

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

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

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