《前端项目打包与部署指南：从npm run build到线上发布》

刚写完代码的你兴奋地点下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 [email protected]

2. 常用操作

ls # 查看当前目录 cd /var/www # 进入web目录 pwd # 显示当前路径 mkdir demo # 创建文件夹

三、文件上传：两种常用方式

方法1：Xftp可视化传输

1. 打开Xftp → 新建连接
2. 左侧本地窗口拖入dist文件夹
3. 右侧服务器窗口选择目标目录（如/var/www/html）

方法2：scp命令直传（适合小文件）

scp -r ./dist root@服务器IP:/目标路径 # 示例： scp -r ./dist [email protected]:/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 即可一键部署！