刚写完代码的你兴奋地点下npm run build，却发现不知道生成的dist文件夹该怎么用？别急，这篇手把手教程带你完成从本地打包到服务器部署的全流程！🚀
一、本地打包：npm run build详解
1. 打包命令的本质
npm run build # 实际执行的是package.json里的scripts.build
你的package.json里应该有类似配置：
"scripts": {
"build": "vite build" // 或react-scripts build/webpack build等
}
2. 打包后得到什么？
dist/
├── assets/ # 静态资源（JS/CSS/图片）
├── index.html # 入口文件
└── favicon.ico # 网站图标
⚠️ 注意：不同构建工具输出结构略有不同（Vite/Webpack/CRA等）
二、连接服务器：SSH入门
1. 基础连接命令
ssh username@服务器IP -p 端口号
# 示例（默认22端口可省略-p）：
ssh root@123.45.67.89
2. 常用操作
ls # 查看当前目录
cd /var/www # 进入web目录
pwd # 显示当前路径
mkdir demo # 创建文件夹
三、文件上传：两种常用方式
方法1：Xftp可视化传输
打开Xftp → 新建连接左侧本地窗口拖入dist文件夹右侧服务器窗口选择目标目录（如/var/www/html）
方法2：scp命令直传（适合小文件）
scp -r ./dist root@服务器IP:/目标路径
# 示例：
scp -r ./dist root@123.45.67.89:/var/www
四、Nginx配置（让网站能访问）
1. 基础配置示例
server {
listen 80;
server_name yourdomain.com; # 没有域名可写服务器IP
location / {
root /var/www/dist; # 你的dist目录路径
index index.html;
try_files $uri $uri/ /index.html; # 处理前端路由
}
}
2. 重启Nginx生效
nginx -t # 测试配置是否正确
nginx -s reload # 重启服务
五、常见问题排查
❌ 403 Forbidden
➔ 检查目录权限：chmod -R 755 /var/www
❌ 页面空白/CSS丢失
➔ 检查资源路径：打包时用./相对路径
❌ 接口请求404
➔ 配置Nginx代理：
location /api {
proxy_pass http://后端服务地址:端口;
}
自动化部署彩蛋 🎁
在项目根目录创建deploy.sh：
#!/bin/bash
npm run build
scp -r ./dist root@服务器IP:/var/www
ssh root@服务器IP "nginx -s reload"
echo "部署完成！"
运行：sh deploy.sh 即可一键部署！