Nuxt 3 部署后 CSS 丢失且报 404，通常是因为构建产物路径配置与服务器静态资源映射不一致。优先检查 nuxt.config.ts 中的 app.baseURL 设置及 Nginx 的 try_files 规则，避免直接修改源码而未重新构建。

命令速用版

若使用宝塔面板或标准 Nginx 环境，可直接参考以下配置片段修复静态资源映射。

# Nginx 配置示例
location / {
    try_files $uri $uri/ /index.html;
}

# 构建命令
npm run build
# 或静态生成
npm run generate

为什么会这样

Vite 构建机制生成的 CSS 文件带有 hash 值，若路径前缀不匹配会导致请求失败。Nuxt 3 默认使用 Vite 构建系统，生产环境下的资源路径依赖 app.baseURL 配置，若该配置与部署目录层级不一致，浏览器请求的 CSS 路径会指向错误位置。同时，SPA 模式下刷新页面若 Nginx 未配置回退规则，服务器会直接返回 404 而非 index.html，导致后续资源加载中断。

分步处理

按顺序检查构建输出、配置文件和服务端设置，每一步完成后需重新构建验证。

1. 检查构建产物
查看项目根目录的 dist 或 .output 文件夹，确认是否存在 .css 文件。若目录为空或缺少样式文件，说明构建流程未正确执行 CSS 打包，需检查 nuxt.config.ts 中是否误禁用了 CSS 提取插件。

2. 修正 baseURL 配置
打开 nuxt.config.ts，检查 app.baseURL 字段。若部署在根目录，确保值为 /；若部署在子目录（如 /blog/），确保值以 / 开头和结尾，例如 /blog/。配置错误会导致所有静态资源请求路径偏移。

3. 配置 Nginx 回退规则
在宝塔面板或 Nginx 配置文件中，找到对应站点的配置项。确保 location / 块中包含 try_files $uri $uri/ /index.html;。此规则确保当请求的文件不存在时（如前端路由刷新），服务器返回 index.html 交由前端路由处理，避免直接报 404。

怎么验证是否生效

使用浏览器开发者工具确认资源加载状态和响应码。

1. 按下 F12 打开开发者工具，切换到 Network 选项卡。
2. 勾选 Disable cache 并刷新页面。
3. 在筛选栏输入 .css，观察 CSS 文件请求状态码。
4. 若状态码为 200 且页面样式恢复正常，说明修复生效；若仍为 404，检查控制台报错的具体路径是否与 dist 目录结构一致。

常见坑

部署过程中容易忽略的细节往往导致问题复发，需特别注意以下边界条件。

1. 路径斜杠缺失
app.baseURL 配置若缺少结尾斜杠（如写成 /blog 而非 /blog/），可能导致资源拼接路径错误。公开资料中没有看到可靠的量化数据表明哪种写法兼容性更好，但官方建议保持首尾斜杠一致。

2. SSR 与静态模式混淆
若使用 nuxt start 启动 SSR 服务，需配合 PM2 托管并配置反向代理，而非直接指向 dist 目录。静态生成模式则需确保 Nginx 根目录指向 dist。

3. 第三方库样式未引入
使用 Ant Design 或 TailwindCSS 时，若未在全局样式或配置中显式引入 CSS 文件，构建后样式可能丢失。需检查 app.vue 或模块配置是否包含必要的样式导入语句。

常见问题

SSR 模式下刷新页面必报 404 怎么办？

需在 Nginx 配置中添加 try_files 规则将请求回退至 index.html。SSR 模式虽由 Node.js 渲染，但静态资源仍依赖 Nginx 正确映射，若配置缺失会导致资源加载失败。

部署在子目录后样式全部丢失如何解决？

检查 nuxt.config.ts 中 app.baseURL 是否设置为子目录路径。Vite 构建时会根据该配置生成资源路径，若配置为空或错误，浏览器无法在子目录下找到根路径的资源。

清除缓存后样式依然不显示是什么原因？

可能是 CSP 策略拦截或 CSS 文件内容为空。检查浏览器控制台是否有 Content Security Policy 警告，并确认构建出的 CSS 文件大小不为 0 字节。

参考来源

• CSDN 问 - 宝塔部署 Nuxt 时静态资源 404 或路由刷新 404 如何解决？
• CSDN 问 - css 打包后样式丢失怎么办_确认 css 是否被正确 link 引入
• 告别 404!Nuxt.js 静态站点子目录部署全攻略
• CSDN 问 - Nuxt3 部署宝塔后静态资源 404 如何解决？
• 从崩溃到修复:Nuxt 3.16.2 版本 CSS 路径解析问题的完整解决方案
• 浏览器无法加载 CSS 样式怎么办 修复网页排版混乱问题【指南】