一，市面上五种常见的项目部署方法

1，GitHub Pages:

适合：

• 个人项目

• 作品集

• 课程设计

• 静态网站（React/Vue 打包后的项目）

优点：

• 完全免费

• 不用买服务器

• 一键部署

• 全球可访问

缺点：

• 只能部署静态项目

• 不能运行后端（Java/Node.js）

2, Vercel(国外流行)

适合：

• React / Vue / Next.js 项目

• 想要超快速度

• 想要一键自动部署

优点：

• 自动部署（提交代码就更新）

• HTTPS 免费

• 速度全球最快

缺点：

• 国内访问偶尔不稳定

3.Netlify（和 Vercel 类似）

适合：

• 静态网站

• 毕业设计

• 小型官网

优点：

• 简单

• 免费

• 自动部署

4.阿里云 / 腾讯云（企业最常用）

适合：

• 企业项目

• 商业项目

• 需要后台（Java/Python/Node.js）

• 对稳定性要求高

优点：

• 稳定、高速

• 可部署前后端

• 企业标准

缺点：

• 收费

• 配置复杂

5.自己买服务器+Nginx (传统运维)

适合：

• 大型项目

• 需要完全控制服务器

• 后端 + 前端一起部署

优点：

• 自由度最高

• 可自定义配置

缺点：

• 难

• 要花钱

• 学生场景极少使用

总结：

现在主流部署分两大类：

1. 静态网站部署（前端项目） GitHub Pages、Vercel、Netlify 适合学生、作品集、展示类项目，免费、简单、快速。

2. 服务器部署（企业项目） 阿里云、腾讯云、Nginx 适合商业项目、带后端的项目，稳定、专业、收费。

✅ 我们使用的 GitHub Pages：最适合学生、零成本、最简单的部署方式！

二,项目部署的原理

1. 构建 / 打包原理（最关键） 我们写的 React/TS 源码，浏览器无法直接识别 执行npm run build，工具会自动： 转译代码 → 压缩文件 → 生成dist文件夹 dist = 项目成品包，是给浏览器运行的最终文件

2. 上传原理 把本地的dist成品，上传到 GitHub 的服务器上

3. 托管原理 GitHub 免费提供服务器，读取dist静态文件，生成公网网址

4. 访问原理 用户打开网址 → GitHub 返回静态文件 → 浏览器渲染页面

三、前端项目部署的专属原理

• 本地打包：npm run build → 生成dist静态文件夹

• 工具上传：gh-pages自动把dist推送到 GitHub

• 服务器托管：GitHub 自动生成访问链接

• 用户访问：纯静态资源加载，无后端、速度快

四，使用GitHub 进行配置步骤

步骤1：配置项目路径

1. 打开项目根目录的 vite.config.ts 文件，添加 base 配置：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// 👇 这里必须改成你的 GitHub 仓库名：
export default defineConfig({
  //让vite支持React语法（JSX，组件,Hooks）
  plugins: [react()],
  base: '/你的仓库名/'
})

步骤 2：安装部署工具

npm install gh-pages --save-dev

步骤 3：配置打包 & 部署命令

打开项目根目录的 package.json，在 "scripts" 里添加 2 行：

"scripts": {
  "dev": "vite",
  "build": "tsc && vite build",
  "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
  "preview": "vite preview",
  // 👇 新增下面这两行
  "predeploy": "npm run build",
  "deploy": "gh-pages -d dist"
},

步骤 4：一键执行部署

npm run deploy

五，你的上线地址

部署完成后，你的项目在线网址：

https://yuanjingteam.github.io/仓库名/

六、实战避坑指南

1. 页面空白 / 图片不显示

   原因：vite.config.ts的base路径配置错误

2. git push 提交失败

   原因：国内网络限制，推荐用 VS Code 内置终端 / 手机热点

3. 部署后不生效

   解决方案：浏览器强制刷新

4. dist 文件夹作用

自动生成的项目成品，部署只需要上传这个文件夹

七、修改代码后如何更新上线？

# 1. 保存修改
git add .
git commit -m "更新项目功能"
# 2. 同步到GitHub
git push origin main
# 3. 重新部署
npm run deploy