Nginx
Nginx（念作 “engine-x”）是一个高性能的 Web 服务器和反向代理服务器。
前端为什么需要nginx
1. 最简单的网站
index.html, style.css, main.js组成，在电脑上双击index.html就能打开，浏览器本身就能解析html，css，JavaScript，所以不需要服务器就能显示出页面内容
2. 为什么现代前端（Vue、React、Vite）都要“挂载开发服务器”
因为现代前端框架的源码不是浏览器能直接识别的
例如：
- import App from './App.vue'：❌ 浏览器无法识别
.vue - TypeScript 语法：❌ 浏览器不认识 TS
- 模块路径别名（
@/components）： ❌ 浏览器不理解 - 组件热更新（HMR）： ❌ 静态文件无法实现
所以这些框架在开发时会启动一个“开发服务器”做几件事：
- 实时编译代码（例如.vue -> js）
- 热更新
- 模块解析（处理import/export）
- 原生ES Module不需要服务器处理
<script type="module">
import { sayHi } from './utils.js'
sayHi()
</script>
只要所有文件路径都是实际存在的，且浏览器能直接访问这些.js文件（哪怕是本地文件或静态服务器）这时候 不需要 Node.js 或 Nginx 做额外的处理。
- 框架式项目需要服务器处理。
比如在 Vue、React、Vite、VuePress 里常见的这种：
import { ref } from 'vue'
import App from './App.vue'
浏览器并不能直接识别：
.vue文件；- TypeScript；
- JSX；
- 别名路径（如
@/components）。
这些都需要 Node.js 启动的**开发服务器（Dev Server）**来：
1. 动态把 .vue、.ts、.jsx 编译成普通 JS；
2. 重新打包 import 关系；
3. 热更新。
- 提供本地接口模拟或跨域代理
但开发服务器和生产服务器不是一个东西
Node.js 确实可以提供网页访问，但你平时在用的像：
-
vite dev -
npm run dev -
next dev -
vue-cli-service serve
这些命令启动的 只是开发用的临时服务器，它的职责是：
- 热更新（HMR） ：代码一改浏览器就刷新；
- 实时打包：实时编译 Vue、React、TypeScript；
- 代理跨域请求；
- 仅为单个开发者服务。
但它不适合线上使用：
- 性能差（热更新、打包、文件监听很耗资源）；
- 安全性低（没做防护、缓存、负载均衡等）；
- 不稳定（意外崩溃时无人重启，日志和状态也没保存）。
所以，Node.js 的开发服务器 ≠ 线上服务器。
Nginx的定位：生产级的反向代理 + 静态资源服务器
Nginx 是一个专门为高性能、稳定、并发访问设计的服务器软件，它负责静态资源托管：把你打包好的 HTML/CSS/JS 文件直接返回给浏览器。
Nginx 不负责：
- Vue / React / Vite / TypeScript 等前端源码的编译。
- 热更新（HMR）。
- 动态生成 HTML（除非搭配后端模板引擎）。
- 模块解析（
import/.vue文件等）。
这些都是 Node.js 或打包工具在开发阶段完成的工作。
