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

一、本地打包：npm run build详解

1. 打包命令的本质

npm run build # 实际执行的是 package.json 里的 scripts.build

你的 package.json 里应该有类似配置：

{
  "scripts": {
    "build": "vite 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 配置（让网站能访问）