文章目录一、前端项目本质是什么二、为什么一定要“Web 服务器”2.1 提供 HTTP 服务三、为什么不能用 Node / 直接拷文件四、Nginx / Apache 在前端部署中的关键作用4.1 静态文件托管最重要4.2 SPA 路由兜底非常关键4.3 性能优化前端非常依赖4.4 HTTPS 证书4.5 反向代理现代前端必备五、不同 Web 服务器的对比六、实际部署示例1. **最简单的 Nginx 配置**2. **Docker Nginx 组合**3. **Apache 配置示例**先一句话结论:因为浏览器不能直接“跑前端项目”需要一个 Web 服务器把文件“按 HTTP 规则”正确地提供出来而Nginx / Apache就是干这个的。一、前端项目本质是什么部署后的前端项目其实就是一堆静态资源index.html main.js style.css assets/xxx.png浏览器只能通过HTTP/HTTPS访问这些文件❌ 不能直接访问你服务器磁盘上的文件。为什么不能直接打开 HTML 文件1. 路径问题!-- 直接双击 index.html 在浏览器打开 --!-- 会看到 --file:///D:/project/dist/index.html!-- 资源加载会失败 --scriptsrc/assets/index.js/script!-- 变成file:///assets/index.js 不存在 --2. 模块和 API 限制ES 模块script typemodule需要 HTTP 服务器CORS 限制AJAX/Fetch 请求在 file:// 协议下被阻止路由问题Vue Router/React Router 需要服务器支持二、为什么一定要“Web 服务器”2.1 提供 HTTP 服务Nginx / Apache 的核心能力监听 80 / 443 端口处理 HTTP 请求返回正确的文件内容浏览器 ──HTTP── Nginx ── index.html没有它服务器不知道如何响应请求也不会有正确的 headersContent-Type、Cache 等三、为什么不能用 Node / 直接拷文件直接拷文件浏览器不能file:///访问线上资源SPA 路由全部失效直接跑npm run dev开发模式性能差不安全不支持高并发四、Nginx / Apache 在前端部署中的关键作用4.1 静态文件托管最重要location / { root /usr/share/nginx/html; index index.html; }4.2 SPA 路由兜底非常关键前端路由如/login /user/123实际服务器没有这些文件try_files $uri $uri/ /index.html;否则刷新直接 4044.3 性能优化前端非常依赖gzip / brotli 压缩HTTP/2静态资源缓存expires 1y; add_header Cache-Control public;4.4 HTTPS 证书TLS 终止自动证书Let’s Encrypt前端项目必须 HTTPS4.5 反向代理现代前端必备/api/ - 后端服务解决跨域前后端解耦统一域名五、不同 Web 服务器的对比特性NginxApacheNode.js直接文件静态文件服务✅ 优秀✅ 优秀✅ 可以❌ 有限SPA 路由支持✅ 需要配置✅ 需要配置✅ 容易❌ 不支持性能⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐N/A配置复杂度中等较高低无内存占用低中等高无生产就绪✅✅✅ 但需优化❌六、实际部署示例1.最简单的 Nginx 配置server{listen80;server_name yourdomain.com www.yourdomain.com;root /var/www/vue-app;index index.html;# SPA 路由支持location /{try_files$uri$uri/ /index.html;}# 静态资源缓存location ~*\.(js|css|png|jpg|jpeg|gif|ico)${expires 1y;add_header Cache-Controlpublic, immutable;}}2.Docker Nginx 组合# 多阶段构建Node 构建Nginx 运行 FROM node:18 AS builder WORKDIR /app COPY . . RUN npm install npm run build FROM nginx:alpine COPY --frombuilder /app/dist /usr/share/nginx/html COPY nginx.conf /etc/nginx/conf.d/default.conf EXPOSE 80 CMD [nginx, -g, daemon off;]3.Apache 配置示例VirtualHost *:80 ServerName yourdomain.com DocumentRoot /var/www/vue-app Directory /var/www/vue-app Options Indexes FollowSymLinks AllowOverride All Require all granted # SPA 路由重写 RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L] /Directory /VirtualHost 感谢阅读想了解更多 我的博客网站 | 记录思考分享干货 我的个人主页 | 关于我、开源项目