一市面上五种常见的项目部署方法1GitHub Pages:适合个人项目作品集课程设计静态网站React/Vue 打包后的项目优点完全免费不用买服务器一键部署全球可访问缺点只能部署静态项目不能运行后端Java/Node.js2, Vercel(国外流行)适合React / Vue / Next.js 项目想要超快速度想要一键自动部署优点自动部署提交代码就更新HTTPS 免费速度全球最快缺点国内访问偶尔不稳定3.Netlify和 Vercel 类似适合静态网站毕业设计小型官网优点简单免费自动部署4.阿里云 / 腾讯云企业最常用适合企业项目商业项目需要后台Java/Python/Node.js对稳定性要求高优点稳定、高速可部署前后端企业标准缺点收费配置复杂5.自己买服务器Nginx (传统运维)适合大型项目需要完全控制服务器后端 前端一起部署优点自由度最高可自定义配置缺点难要花钱学生场景极少使用总结现在主流部署分两大类静态网站部署前端项目 GitHub Pages、Vercel、Netlify 适合学生、作品集、展示类项目免费、简单、快速。服务器部署企业项目 阿里云、腾讯云、Nginx 适合商业项目、带后端的项目稳定、专业、收费。✅ 我们使用的 GitHub Pages最适合学生、零成本、最简单的部署方式二,项目部署的原理构建 / 打包原理最关键 我们写的 React/TS 源码浏览器无法直接识别 执行npm run build工具会自动 转译代码 → 压缩文件 → 生成dist文件夹 dist 项目成品包是给浏览器运行的最终文件上传原理 把本地的dist成品上传到 GitHub 的服务器上托管原理 GitHub 免费提供服务器读取dist静态文件生成公网网址访问原理 用户打开网址 → GitHub 返回静态文件 → 浏览器渲染页面三、前端项目部署的专属原理本地打包npm run build→ 生成dist静态文件夹工具上传gh-pages自动把dist推送到 GitHub服务器托管GitHub 自动生成访问链接用户访问纯静态资源加载无后端、速度快四使用GitHub 进行配置步骤步骤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/仓库名/六、实战避坑指南页面空白 / 图片不显示原因vite.config.ts的base路径配置错误git push 提交失败原因国内网络限制推荐用 VS Code 内置终端 / 手机热点部署后不生效解决方案浏览器强制刷新dist 文件夹作用自动生成的项目成品部署只需要上传这个文件夹七、修改代码后如何更新上线# 1. 保存修改 git add . git commit -m 更新项目功能 # 2. 同步到GitHub git push origin main # 3. 重新部署 npm run deploy
前端项目部署方法与 GitHub Pages 上线实操
发布时间：2026/7/27 20:32:42
一市面上五种常见的项目部署方法1GitHub Pages:适合个人项目作品集课程设计静态网站React/Vue 打包后的项目优点完全免费不用买服务器一键部署全球可访问缺点只能部署静态项目不能运行后端Java/Node.js2, Vercel(国外流行)适合React / Vue / Next.js 项目想要超快速度想要一键自动部署优点自动部署提交代码就更新HTTPS 免费速度全球最快缺点国内访问偶尔不稳定3.Netlify和 Vercel 类似适合静态网站毕业设计小型官网优点简单免费自动部署4.阿里云 / 腾讯云企业最常用适合企业项目商业项目需要后台Java/Python/Node.js对稳定性要求高优点稳定、高速可部署前后端企业标准缺点收费配置复杂5.自己买服务器Nginx (传统运维)适合大型项目需要完全控制服务器后端 前端一起部署优点自由度最高可自定义配置缺点难要花钱学生场景极少使用总结现在主流部署分两大类静态网站部署前端项目 GitHub Pages、Vercel、Netlify 适合学生、作品集、展示类项目免费、简单、快速。服务器部署企业项目 阿里云、腾讯云、Nginx 适合商业项目、带后端的项目稳定、专业、收费。✅ 我们使用的 GitHub Pages最适合学生、零成本、最简单的部署方式二,项目部署的原理构建 / 打包原理最关键 我们写的 React/TS 源码浏览器无法直接识别 执行npm run build工具会自动 转译代码 → 压缩文件 → 生成dist文件夹 dist 项目成品包是给浏览器运行的最终文件上传原理 把本地的dist成品上传到 GitHub 的服务器上托管原理 GitHub 免费提供服务器读取dist静态文件生成公网网址访问原理 用户打开网址 → GitHub 返回静态文件 → 浏览器渲染页面三、前端项目部署的专属原理本地打包npm run build→ 生成dist静态文件夹工具上传gh-pages自动把dist推送到 GitHub服务器托管GitHub 自动生成访问链接用户访问纯静态资源加载无后端、速度快四使用GitHub 进行配置步骤步骤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/仓库名/六、实战避坑指南页面空白 / 图片不显示原因vite.config.ts的base路径配置错误git push 提交失败原因国内网络限制推荐用 VS Code 内置终端 / 手机热点部署后不生效解决方案浏览器强制刷新dist 文件夹作用自动生成的项目成品部署只需要上传这个文件夹七、修改代码后如何更新上线# 1. 保存修改 git add . git commit -m 更新项目功能 # 2. 同步到GitHub git push origin main # 3. 重新部署 npm run deploy
