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

文章目录

    • 前言
    • [GitHub Pages 来部署前端框架(Vue 3 + Vite)项目](#GitHub Pages 来部署前端框架(Vue 3 + Vite)项目)

前言

可以先参考:

使用 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 分支。

    bash 复制代码
    npm install --save-dev gh-pages
  2. 修改 vite.config.js 配置

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

    javascript 复制代码
    export default defineConfig({
      base: '/my-vue-project/', // 这里的 'my-vue-project' 为你的 GitHub 仓库名称
      plugins: [vue()]
    });
  3. 修改 package.json 配置

    package.json 中添加 homepage 字段和部署脚本:

    json 复制代码
    "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:

    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

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

    bash 复制代码
    npm run build
    npm run deploy
  2. 这会将 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 分支

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

相关推荐
HelloGitHub1 小时前
开源新旗舰 GLM-4.5:不想刷榜,只想干活儿
人工智能·开源·github
星际码仔2 小时前
Zread 和 DeepWiki 怎么选?一张图全搞懂
github·chatglm (智谱)
DogDaoDao2 小时前
GitHub开源项目Zerox:AI驱动的OCR革命
人工智能·深度学习·开源·github·ocr·图像识别·zerox
Albert_Lsk3 小时前
【2025/07/28】GitHub 今日热门项目
人工智能·开源·github·开源协议
C++ 老炮儿的技术栈15 小时前
在 Scintilla 中为 Squirrel 语言设置语法解析器的方法
linux·运维·c++·git·ubuntu·github·visual studio
油泼辣子多加15 小时前
2025年07月25日Github流行趋势
github
OpenTiny社区16 小时前
把 SearchBox 塞进项目,搜索转化率怒涨 400%?
前端·vue.js·github
王小义笔记17 小时前
创建属于自己的github Page主页
github
@大迁世界17 小时前
第7章 React性能优化核心
前端·javascript·react.js·性能优化·前端框架
我是哈哈hh18 小时前
【AJAX项目】黑马头条——数据管理平台
前端·javascript·ajax·前端框架·axios·proxy模式