部署上线Deployment
上线与排错把本地项目发布成别人能访问的网站
部署平台会取得源码、执行构建并生成公网版本。发布前要确认构建命令、输出目录和线上环境变量；失败时先看构建日志，成功后再接入自定义域名。
💻本地文件
→
📦build 打包
→
☁️托管平台
→
🌐my-app.vercel.app
什么时候用
- 确认构建方式和输出目录：平台可以从源码构建，也可以接收产物📄 源码npm run build →📦 dist 成品
- 根据项目类型选择 Vercel、Netlify 等合适平台VercelNetlifyGitHub Pages
- 连 Git 版本控制 Git 仓库自动部署：push 一次就自动重新上线git push☁️ 自动重新上线连上仓库，提交即发布
- 绑定自己的域名 Domain：平台给的网址能换成你的域名my-app-x8k2.vercel.appwww.mysite.com平台给的网址能换成自己的域名
什么时候不用
- 不要把 localhost 地址发给别人，它只在自己的电脑上可用http://localhost:3000localhost 是你自己电脑，别人打不开
- 双击 html 能打开就当上线了：file:// 只有你自己看得见file:///Users/…/index.html双击能开 ≠ 上线，只有你自己看得见
- 不看平台配置就上传：构建命令或输出目录错了，线上就会失败⚙ 构建命令 / 输出目录填错→失败
- 上线后自己不点一遍：图片挂了、Key 没配，用户先踩雷图片 404上线不点一遍，用户先踩雷
组成结构 · Anatomy
💻源码
→
📦打包产物
→
☁️托管平台
→
🌐公网网址
1源码Source你写的或 AI 生成的源文件，浏览器不一定直接能跑
2打包产物Build Outputbuild 之后生成的 dist，压缩合并过的成品
3托管平台HostingVercel / Netlify / GitHub Pages，负责 7×24 在线
4公网网址URL平台分配的地址，也能绑成自己的域名
常见变体 · Variants
Vercel / NetlifyVercel & Netlify
vercel --prod
前端项目常用，可连接仓库自动部署
GitHub PagesGitHub Pages
Settings → Pages
纯静态页面，免费挂在仓库上
自建服务器VPS
ssh user@1.2.3.4
要跑后端常驻，进阶再折腾
典型使用场景
Vercel 部署成功页
🎉
Congratulations!
my-first-page 部署成功
页面预览
my-first-page.vercel.app
终端 npm run build
$ npm run build
vite v6.0.0 building for production…
dist/index.html 0.5 kB
dist/assets/index-8fk2.js 142 kB
✓ built in 3.2s
dist 文件夹就是交给平台的成品
push 触发自动部署
浏览器打开公网网址