Nuxt 打包部署踩坑：静态生成与服务端渲染怎么选

# 一、先想清楚要哪种模式 Nuxt 部署前一定要先确定渲染模式，因为它决定了**构建产物和服务器要求**： - **静态生成**：构建时生成 HTML，放到任意静态服务器即可； - **服务端渲染**：需要 Node 运行环境，每次请求动态渲染。 选错模式的典型症状：把 SSR 项目当静态文件丢到 Nginx 上，结果页面数据全是空的。 # 二、两种模式的取舍 | 场景 | 推荐模式 | | --- | --- | | 博客、官网等固定内容 | 静态生成 | | 内容定期更新、需要 SEO | 静态生成 + 定期重构 | | 用户登录、实时数据 | 服务端渲染 | | 访问量小、要求部署简单 | 静态生成 | 判断标准就一句：**页面内容是否因用户或实时数据而变化**。不变就静态，要变就服务端。 # 三、构建产物的区别 静态模式产出的是一个可直接部署的目录，里面是完整的 HTML、JS、CSS 和静态资源。 服务端模式产出的是服务端运行包，需要保留构建输出和依赖，用 Node 启动。 **部署时千万别混**，我见过把服务端产物目录当静态站传到 CDN 的，页面打开是源码。 # 四、环境变量的坑 这是最容易出错的地方： 1. **构建期变量**：在构建时就被内联进产物，运行时改无效。改配置必须**重新构建**； 2. **运行时变量**：只有服务端模式才真正生效，服务端可以读取； 3. **敏感信息**：任何在客户端可见的变量都会被打进产物，**密钥绝不能放进去**。 实践建议：把配置分成"构建就固定"和"运行时可变"两类，前者可以打进产物，后者走服务端读取。 # 五、部署后常见问题 ## 1. 接口 404 服务端渲染的接口路由需要服务进程接管。如果前面加了反向代理，要确保**接口路径也转发到 Node 服务**，而不是被当成静态请求处理。 ## 2. 静态资源 404 通常是**部署路径和构建时的基础路径不一致**。如果应用部署在子目录下，构建时要显式指定基础路径。 ## 3. 刷新页面 404 静态部署到 Nginx 时，路由是前端控制的，直接访问深层路径服务器找不到文件。需要在 Nginx 配置里加**回退到首页**的规则。 ## 4. 首屏样式闪烁 资源加载顺序或样式内联问题，检查是否开启了按需加载但没处理好首屏关键样式。 # 六、部署检查清单 1. **模式选对**——静态还是服务端，先确认； 2. **基础路径一致**——构建和部署路径要匹配； 3. **回退规则配好**——避免刷新 404； 4. **环境变量分类**——哪些构建期、哪些运行时，分清楚； 5. **密钥不进前端**——服务端才放敏感配置； 6. **构建命令确认**——不同模式命令不同，别用错。 # 七、小结 Nuxt 部署的坑，八成源于"**没先确定渲染模式**"。先想清楚页面要不要动态渲染，再去决定构建和部署方式，比部署完发现不对再返工要省事得多。