核心是打通构建、路径、路由、缓存和代理：构建路径需与Nginx root/alias对齐；SPA须配置try_files $uri $uri/ /index.html实现路由回退；哈希文件启用1年强缓存，index.html禁用缓存；开发期可用proxy_pass代理/api请求。
用 Nginx 整合静态资源与前端构建工具，核心是让构建产物能被 Nginx 正确识别、高效分发，并适配开发与部署全流程。这不是简单把 dist 文件夹扔进去就完事，而是要打通构建、路径、路由、缓存和代理这几个关键环节。
构建输出路径需与 Nginx root/alias 对齐
前端工具（如 Vite、Webpack、Vue CLI）默认打包到 dist 目录，Nginx 必须指向这个实际路径，否则 404。
- 确认构建配置中
build.outDir（Vite）或output.path（Webpack）的值，例如./dist - Nginx 配置中使用
root指向其父目录，再用location /匹配根路径：root /var/www/myapp;→ 实际文件在/var/www/myapp/dist/index.html，则应设为root /var/www/myapp/dist; - 若需映射子路径（如
/assets/），优先用alias而非root，避免路径拼接错误
SPA 路由必须启用 try_files 回退
Vue Router、React Router 等前端路由依赖 HTML5 History API，直接访问 /user/profile 时，Nginx 若找不到对应文件会返回 404。需让所有未命中静态资源的请求都回退到 index.html，交由前端路由接管。
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 在
location /块中添加：try_files $uri $uri/ /index.html; - 确保该指令位于最外层
location /，不要被更具体的正则 location 覆盖 - 不建议用
error_page 404 = /index.html替代，它无法保留原始 URL，会导致路由丢失
构建产物名应带哈希，Nginx 配置强缓存
前端工具支持生成带 contenthash 的文件名（如 main.a1b2c3.js），配合 Nginx 缓存策略，可实现长期缓存 + 自动更新。
立即学习“前端免费学习笔记（深入）”；
- 开启构建哈希：Vite 中设
build.rollupOptions.output.entryFileNames；Webpack 中设output.filename: '[name].[contenthash:8].js' - Nginx 对哈希文件启用一年强缓存：
location ~* \.[a-f0-9]{8,}\.(js|css|png|jpg|gif|webp)$ {<br> expires 1y;<br> add_header Cache-Control "public, immutable";<br>} - 对无哈希的 HTML 文件禁用缓存：
location = /index.html { add_header Cache-Control "no-cache"; }
开发阶段用 proxy_pass 解耦前后端调用
本地开发时，构建工具的 dev server（如 vite dev）通常自带代理，但若需统一走 Nginx（例如多子应用联调、模拟 CDN 行为），可用 Nginx 反向代理后端接口，同时托管静态资源。
- 将 API 请求转发至本地后端：
location /api/ { proxy_pass http://localhost:3000/; }（注意末尾斜杠，避免路径重复） - 静态资源仍由 Nginx 直接服务，零跨域、零 CORS 配置
- 搭配 hosts 修改（如
127.0.0.1 local.myapp.com）+ server_name，可完全模拟线上域名环境
