一、知识回顾（读完直接做下面的实践题）#

1. 为什么要打包：开发阶段靠 Vite 开发服务器（默认 5173）+ vite.config.js 里的代理跑；上线时服务器上不会有这东西，前端必须先变成浏览器能直接认的静态文件，再交给 Web 服务器发出去
2. 打包命令：到工程根目录（有 package.json 的那层）执行 npm run build（本课程工程的 build 脚本 = vite build），产物是 dist 目录
3. dist 里有什么：index.html、assets/（编译压缩后的 js、css 等）、favicon.ico——就是”一个 html + 一堆资源”，源码和 node_modules 都不用带
4. 打包干的三件事：编译（.vue/组合式 API 等转成普通 JS）、合并压缩（上百模块合成几个文件）、产出纯静态文件（不需要 Node、不需要 Vite）
5. 打包体积可以和 95 篇的实测对照：index.html 0.42 KiB、index.css 316.98 KiB、index.js 877.21 KiB，还有 chunks are larger than 500 KiB 的提示（ElementPlus 全量引入所致）
6. Nginx 是什么：轻量级的 Web 服务器 / 反向代理服务器及电子邮件（IMAP/POP3）代理服务器；特点是占有内存少、并发能力强；官网 https://nginx.org/ ；两个身份本站都见过——59 篇用的是”反向代理”，本篇用的是”Web 服务器”
7. 部署三步（PPT 第 26～27 页）：① 把 dist 目录下的文件复制到 nginx 安装目录的 html 目录里 ② 双击 nginx.exe 启动（默认占用 80 端口）③ 浏览器访问 http://localhost:80（= http://localhost）
8. nginx 目录结构：conf（配置文件目录，nginx.conf 在这里）、contrib、docs、html（静态资源文件存放目录，html/css/js 放这儿）、logs（日志）、temp（临时文件）、nginx.exe（可执行文件）
9. 80 端口被占用的处理：查占用用 netstat -ano | findStr 80（拿到 PID 去任务管理器对程序）；改端口改 conf/nginx.conf 里 server 块的 listen 80;；重载/重启后按新端口访问（http://localhost:90）——59 篇那份 nginx 就是 90
10. 三条命令（PPT 第 28 页）：启动 nginx.exe、重载 nginx.exe -s reload、停止 nginx.exe -s stop；命令在 nginx 安装目录里执行；改了 nginx.conf 必须 reload 才生效；Windows 版双击启动后没有窗口，靠浏览器/任务管理器确认
11. 一个补充：打包上线后 /api 请求会打到 nginx 上（没有 Vite 代理了），要在 nginx.conf 里照 59 篇加 location ^~ /api/ + rewrite ^/api/(.*)$ /$1 break; + proxy_pass http://localhost:8080; 才能真正取到数据（PPT 第 21～28 页没讲）
12. 本轮实测边界：打包与 nginx 部署没有实测；可参照第 95 篇（同版本工程的 npm run build 与 dist 大小）和第 59 篇（nginx 起 90 端口 + 反向代理）；第 29 页的班级管理、学员管理是”自己实现”，本轮不涉及

二、裸写题#

• 2-1 把工程变成一份能交给服务器的文件 需求：假设你的前端工程在 D:\code\vue-tlias-management，现在要交给服务器。请写出：① 在哪个目录、执行哪条命令来做”打包”；② 打包产出的文件夹叫什么、里面主要有哪些东西；③ 为什么不能直接把 src、node_modules 拷给服务器；④ 打包结果需不需要 Node 环境才能跑。 素材：工程的 package.json 里 scripts 段有 dev、build、preview、lint 四条脚本。

  提示（先自己想，实在想不出再点开）

  一级 · 思路：打包是”把源码翻译成浏览器能认的东西”，翻译的入口写在 package.json 的脚本里；命令要在工程根目录（package.json 所在的那层）执行，产出固定是那个文件夹 二级 · 方法：命令是 npm run build（这个脚本的实际内容 vite build）；产物目录 dist，里面有 index.html、assets/（js、css）、favicon.ico；src 是源码（浏览器不认 .vue、也不认一个个小模块）、node_modules 是开发用的依赖包（体积巨大且运行期不需要） 三级 · 骨架：① 目录：____（有 package.json 的那层）；命令：____；② 产物目录：____，里面有 ____、____；③ 因为源码浏览器不认识、依赖包运行时用不上；④ dist 是纯静态文件，交给任何静态服务器（nginx）就能发，不需要 Node/Vite

  参考答案（做完再点开）

  1
  ① 目录：D:\code\vue-tlias-management（工程根目录，有 package.json 的那一层）
  2
     命令：npm run build
  3
     （本课程工程里 build 脚本的实际内容是 vite build）
  4
  
  5
  ② 产物：dist 目录
  6
     dist/
  7
     ├── assets/              编译压缩后的 js、css 等
  8
     ├── favicon.ico          站点图标
  9
     └── index.html           入口页面
  10
  
  11
  ③ 不能直接拷 src / node_modules 的原因：
  12
     · src 是源码：.vue 文件、组合式 API、模板语法浏览器都不认识，必须编译；
  13
     · 上百个模块要合并压缩后才适合在网络上传输；
  14
     · node_modules 是开发期依赖包，体积巨大，运行期用不到。
  15
  
  16
  ④ dist 是纯静态文件（html + css + js + 图片），
  17
     不需要 Node、不需要 Vite，交给 nginx 这类静态服务器就能访问。

  显示更多显示更少

  检查点：① 命令写的是 npm run build（不是 npm run dev）；② 产物是 dist（不是 src、不是 public）；③ 能说清楚”编译 + 压缩 + 纯静态”这三层理由；④ 知道 95 篇里跑过同一条命令、产物大小是多少。

• 2-2 把打包产物部署到 nginx 上并访问 需求：手上有一台 Windows 机器，装好了一份绿色版 nginx（目录里有 conf、html、logs、temp 和 nginx.exe），也已经打包出了 dist。请写出从”放文件”到”浏览器里看到页面”的完整步骤（每一步写清楚动作 + 落点），并说明：① 为什么是放到那个目录；② 启动之后浏览器该访问什么地址；③ 后端要不要一起起。 素材：nginx 默认监听 80 端口；conf/nginx.conf 里 location / { root html; index index.html index.htm; }。

  提示（先自己想，实在想不出再点开）

  一级 · 思路：三件事——放文件（放到 nginx 认的那个静态根目录里）、起服务（运行 nginx 的可执行文件）、访问（浏览器默认端口）。放文件时要注意层次：nginx 是拿那个目录当”根”去找 index.html 的 二级 · 方法：把 dist 里面的文件（index.html、assets/、favicon.ico）复制到 nginx 安装目录的 html 目录下；双击（或命令行运行）nginx.exe；浏览器访问 http://localhost（等同 http://localhost:80）；后端还是要单独起自己的服务（课件里是 SpringBoot 打 jar 跑 8080），否则页面能开但取不到数据 三级 · 骨架：① 复制 dist 里的文件 → nginx 的 ____ 目录；② 运行 ____；③ 访问 http://____；④ 后端也要起（不然页面能看、数据取不到）

  参考答案（做完再点开）

  1
  ① 部署（放文件）
  2
     把 dist 目录下的文件——index.html、assets/、favicon.ico——
  3
     复制到 nginx 安装目录的 html 目录下。
  4
     （注意是 dist 里面的东西，不是把 dist 文件夹整个塞进 html）
  5
  
  6
  ② 启动（起服务）
  7
     到 nginx 安装目录，双击 nginx.exe（或命令行执行 nginx.exe）。
  8
     nginx 默认占用 80 端口；启动后没有窗口，在后台跑。
  9
  
  10
  ③ 访问
  11
     浏览器打开 http://localhost:80（也就是 http://localhost）。
  12
  
  13
  ④ 后端
  14
     要一起起（SpringBoot 打 jar 跑自己的端口，课程里是 8080）；
  15
     前端只是页面，数据还得到后端去取。

  显示更多显示更少

  检查点：① 顺序是”放文件 → 起 nginx → 访问”（不是先访问再放文件）；② 落点是 html 目录、复制的是 dist 里面的文件（不嵌套一层）；③ 访问地址写 http://localhost（80 可省）；④ 知道后端要另起；⑤ 能顺嘴说出 html 目录在 nginx 里是”静态资源文件存放目录”（PPT 第 26 页那张图的注释）。

• 2-3 nginx 起不来——80 端口被别的程序占了 需求：双击 nginx.exe 之后浏览器打不开 http://localhost，怀疑 80 端口被占用。请写出：① 用什么命令查出到底是哪个进程占了 80 端口（以及怎么看出进程号）；② 改哪个文件的哪个位置能换端口（写出改前改后的样子）；③ 改完之后要做什么才能生效；④ 换成 90 端口之后浏览器该访问什么地址。 素材：nginx 的配置文件是 conf/nginx.conf，里面有个 server 块；Windows 下可以用任务管理器对进程号。

  提示（先自己想，实在想不出再点开）

  一级 · 思路：先”抓到占端口的人”，再”给 nginx 换个门牌号”，然后”让 nginx 重新读一遍配置”，最后”按新门牌号访问”。门牌号写在配置文件里，改配置不重载等于没改 二级 · 方法：查占用 netstat -ano | findStr 80（-ano 会带上 PID，拿 PID 去任务管理器对）；改 conf/nginx.conf 里 server 块的 listen 80; → listen 90;；用 nginx.exe -s reload 重载（或先 stop 再启动）；访问改成 http://localhost:90 三级 · 骨架：① 查：____ -ano | findStr ____；② 改 conf/____ 里的 listen ____; → listen 90;；③ 生效：nginx.exe -s ____；④ 访问：http://localhost:____

  参考答案（做完再点开）

  1
  ① 查占用：
  2
     netstat -ano | findStr 80
  3
     · -a 列出所有连接与监听端口，-n 用数字显示地址和端口，-o 显示占用它的进程号（PID）
  4
     · 找到 PID 后到「任务管理器 → 详细信息」里对一下是哪个程序
  5
     （PPT 第 27 页给的就是 netstat –ano | findStr 80）
  6
  
  7
  ② 改端口（conf/nginx.conf 的 server 块）：
  8
     server {
  9
         listen       80;      ← 改成 listen       90;
  10
         server_name  localhost;
  11
         location / {
  12
             root   html;
  13
             index  index.html index.htm;
  14
         }
  15
     }
  16
  
  17
  ③ 生效：
  18
     nginx.exe -s reload     （改完 nginx.conf 必须重载；也可以先 nginx.exe -s stop 再启动）
  19
  
  20
  ④ 访问：
  21
     http://localhost:90     （端口不是 80 时，地址里必须写出来）

  显示更多显示更少

  检查点：① 命令是 netstat -ano | findStr 80（能说出 -ano 里有”显示进程号”的作用）；② 改的是 conf/nginx.conf 里 server 块的 listen（不是别的地方）；③ 知道改完必须 reload（不重载的话现象和改之前一模一样）；④ 访问地址带上新端口；⑤ 联想 59 篇那份 nginx 就是 listen 90;。

• 2-4 nginx 的三条命令分别什么时候用 需求：请写出 nginx 在 Windows 下的启动 / 重载 / 停止三条命令，并针对下面四种情形各挑一条命令说明理由——① 第一次把 nginx 跑起来；② 把 listen 80; 改成了 listen 90;；③ 前端重新打包了，换掉了 html 目录里的 index.html 和 assets；④ 想腾出端口给别的程序，先让 nginx 别再占着。另外说明：这些命令要在什么目录里执行、启动后怎么确认它真的在跑。 素材：nginx 是绿色免安装的，可执行文件叫 nginx.exe。

  提示（先自己想，实在想不出再点开）

  一级 · 思路：三条命令是”起 / 换口气 / 停”——改配置那件事只有”换口气”（重载）能办到，而且它不停服务；纯替换静态文件一般刷新浏览器就行，但顺手重载最稳 二级 · 方法：启动 nginx.exe、重载 nginx.exe -s reload、停止 nginx.exe -s stop（PPT 第 28 页原文）；命令要在 nginx 安装目录（nginx.exe 所在目录）里执行；Windows 版启动后没有窗口，靠浏览器访问或任务管理器里的 nginx 进程确认 三级 · 骨架：① ____；② nginx.exe -s ____；③ 刷新浏览器即可 / 稳妥做法还是 ____；④ nginx.exe -s ____；执行位置：____ 目录

  参考答案（做完再点开）

  1
  三条命令（PPT 第 28 页）：
  2
    启动：nginx.exe
  3
    重载：nginx.exe -s reload
  4
    停止：nginx.exe -s stop
  5
  
  6
  ① 第一次起服务 → 启动：nginx.exe（双击也行）
  7
  ② 改了 listen 80 → 90 → 重载：nginx.exe -s reload
  8
     （改的是 conf/nginx.conf，不重载不生效；重载不用停服务）
  9
  ③ 换了 html 里的 index.html / assets → 刷新浏览器一般就能看到；
  10
     稳妥做法还是 nginx.exe -s reload
  11
  ④ 想腾出端口 → 停止：nginx.exe -s stop
  12
  
  13
  执行位置：nginx 的安装目录（nginx.exe 所在目录），否则找不到命令。
  14
  确认在跑：浏览器访问 http://localhost[:端口]；或任务管理器里找 nginx 进程
  15
  （Windows 版双击启动后没有窗口、没有托盘图标）。

  显示更多显示更少

  检查点：① 三条命令一字不错（尤其 -s reload / -s stop 的 -s）；② 情形②必须选”重载”而不是”停止”（重载能不停服务换配置）；③ 知道命令要在 nginx 安装目录执行；④ 知道 Windows 版 nginx 启动后”看不见窗口”，要另找办法确认。

三、综合题#

• 3-1 把”从源码到浏览器访问”这条路走一遍（并把它写成清单） 需求：照着 PPT 第 21～28 页，把你自己的 Tlias 前端工程从”源码”一路做到”浏览器访问 http://localhost 能看到页面”，并把整个过程写成一份可以照着做的清单（每一步写清”在哪儿、做什么、怎么确认成功”）。分步做：

  1. 先确认前提：工程能正常开发跑（npm run dev）、后端能起（数据接口能通）；记下两者各自的端口
  2. 打包：到工程根目录执行打包命令，确认产出目录和里面的文件（index.html、assets/）
  3. 准备 nginx：确认机器上有一份 nginx，认清它的目录（配置文件在哪、静态目录在哪、可执行文件在哪）；如果 80 端口已经被占，先把它查出来
  4. 部署：把打包产物里的文件放到 nginx 的静态目录里；如果换了端口，改配置文件里监听的那一行
  5. 启动与生效：起 nginx（改了配置就让它重载）；确认服务真的在跑
  6. 访问验证：浏览器打开对应地址，确认页面显示出来（菜单、页面标题、登录页都在）
  7. 再想一层：页面能开了，但数据从哪来？把”上线后 /api 请求该由谁转发、怎么配”这一步补进清单（提示：第 7 章 59 篇做过）
  8. 收尾：把自己的清单和 PPT 第 28 页那一页小结对一遍（打包 / 部署 / 三条命令），看有没有漏项
  提示（先自己想，实在想不出再点开）

  一级 · 思路：这条链路的四站是——工程（源码）→ dist（产物）→ nginx 的 html（部署）→ 浏览器（访问）；每一站都问自己”东西进了哪个目录、由谁读它”。第 7 步是这道题的重点：页面归 nginx 发，接口得有人转 二级 · 方法：npm run build 出 dist；把 dist 里的文件复制到 nginx 的 html；双击 nginx.exe 启动（默认 80）、改过 nginx.conf 就 nginx.exe -s reload；访问 http://localhost；上线后的 /api 请求用 location ^~ /api/ + rewrite ^/api/(.*)$ /$1 break; + proxy_pass http://localhost:8080; 转给后端 三级 · 骨架：清单四段——① 打包（____ → dist）② 部署（dist 里文件 → nginx/____）③ 启动（____，改了配置用 nginx.exe -s ____）④ 访问（http://localhost[:____]）＋ ⑤ 补充：/api 交给 ____（location ____ /api/）

  参考答案（做完再点开）

  1
  清单：从源码到浏览器访问
  2
  
  3
  【0】前提确认
  4
    · 前端：npm run dev 能起来（开发端口 5173，或日志里实际用的那个）
  5
    · 后端：SpringBoot 工程已启动（课程里 8080；本机因 8080 被占改成了 8081）
  6
  
  7
  【1】打包（PPT 第 24 页）
  8
    · 位置：前端工程根目录（有 package.json 的那层）
  9
    · 命令：npm run build      （= vite build）
  10
    · 产物：dist/ → index.html、assets/（js、css）、favicon.ico
  11
    · 确认成功：命令行没有报错，dist 目录里确实有上面这些文件
  12
  
  13
  【2】准备 nginx（PPT 第 25～26 页）
  14
    · 认清目录：conf/（nginx.conf）、html/（静态资源目录）、logs/、temp/、nginx.exe
  15
    · 先查 80 端口有没有被占：netstat -ano | findStr 80（被占了就准备改端口）
  16
  
  17
  【3】部署（PPT 第 26 页）
  18
    · 把 dist 里面的文件（不是 dist 文件夹本身）复制到 nginx 的 html 目录
  19
    · 如果 80 被占：改 conf/nginx.conf 里 server 块的 listen 80; → listen 90;
  20
    · 确认成功：html 目录下直接能看到 index.html 和 assets
  21
  
  22
  【4】启动 / 重载（PPT 第 26、28 页）
  23
    · 在 nginx 安装目录执行：nginx.exe（启动）
  24
    · 改过 conf/nginx.conf 的话：nginx.exe -s reload
  25
    · 确认在跑：浏览器能打开；或任务管理器里能看到 nginx 进程
  26
      （Windows 版双击启动后没有窗口）
  27
  
  28
  【5】访问（PPT 第 27 页）
  29
    · http://localhost        （80 端口可省略）
  30
    · 改过端口就带上：http://localhost:90
  31
    · 确认成功：页面显示出来（左侧四个菜单、右上角"修改密码 | 退出登录【…】"）
  32
  
  33
  【6】补充一层：页面里的 /api 请求怎么到后端
  34
    · 开发时是 vite.config.js 的代理干的；上线后没有 Vite 了
  35
    · 在 conf/nginx.conf 的 server 块里加反向代理（参照 59 篇）：
  36
        location ^~ /api/ {
  37
            rewrite ^/api/(.*)$ /$1 break;
  38
            proxy_pass http://localhost:8080;
  39
        }
  40
    · 加完 nginx.exe -s reload，再刷新页面验证数据能取到
  41
    · proxy_pass 的端口必须和后端实际端口一致
  42
  
  43
  【7】对照 PPT 第 28 页小结
  44
    打包：run build → dist
  45
    部署：dist 下的文件 → nginx/html
  46
    命令：nginx.exe / nginx.exe -s reload / nginx.exe -s stop

  显示更多显示更少

  检查点：① 清单每一步都写了”在哪儿做、怎么确认”；② 第 4 步能说清”改了配置必须重载”；③ 第 6 步能解释”没有这一步页面能开但数据为空（404）“，并写对那三行配置；④ 全程没有把”打包”和”部署”混为一谈（一个在本机工程里、一个在 nginx 目录里）；⑤ 与 PPT 第 28 页那三条命令对得上。