Nuxt部署后静态资源404，该怎么配置？

依珂提问于 2026-02-23 22:17:21 阅读 12

框架

我用 Nuxt 3 做了个静态站点，本地运行 npm run generate 没问题，但部署到 Nginx 之后，所有 /_nuxt/ 开头的 JS 和 CSS 都返回 404。我试过改 nuxt.config.ts 里的 app.baseURL，但好像没生效。

这是我的组件里一段 React 风格的写法（其实项目是 Nuxt + Vue，但逻辑类似）：

export default {
  data() {
    return { count: 0 }
  },
  mounted() {
    console.log('Component loaded')
  }
}

现在页面能打开，但没样式也没交互，控制台一堆 404，到底该咋配 Nginx 或 Nuxt 才对？

Nuxt 全栈开发服务端渲染

我来解答赞 2 收藏

反馈

2 条解答

东霞 Dev Lv1

这个问题我踩过坑，Nginx 配置没对。

你本地 generate 生成的文件在 .output/public 目录下，Nginx 的 root 要指对位置，而且得处理 SPA 的路由回退。

直接用这个 Nginx 配置：

server {

    listen 80;

    server_name your-domain.com;

    

    root /var/www/your-project/.output/public;

    index index.html;

    

    location / {

        try_files $uri $uri/ /index.html;

    }

    

    location /_nuxt/ {

        alias /var/www/your-project/.output/public/_nuxt/;

        expires 1y;

        add_header Cache-Control "public, immutable";

    }

}

几个关键点说下：

root 路径要指到 .output/public，不是项目根目录。

/_nuxt/ 的 location 块用 alias 而不是 root，不然路径会拼错。这个坑我踩了好几次。

如果你部署在子目录下，比如 https://example.com/blog/，那就要改 nuxt.config.ts：

export default defineNuxtConfig({

  app: {

    baseURL: '/blog/'

  }

})

改完记得重新跑 npm run generate，这玩意不会自动更新。很多人改了配置不重新构建，然后在那排查半天。

还有个坑，Nginx 配置改完记得 nginx -t 测试一下，然后 nginx -s reload 重载。别改完不重载然后怀疑人生。

你那个组件代码跟这问题没关系，控制台 404 清掉就好了。

2026-03-02 17:07

开发者玉娅 Lv1

你生成的是静态站点，但 Nuxt 3 默认生成的 _nuxt 路径是相对于根路径的，Nginx 没有正确转发静态资源请求。
把 Nginx 的配置里 location / 改成返回 index.html，并确保 location /_nuxt/ 直接指向生成的静态文件目录，比如：

location / {

  try_files $uri $uri/ /index.html;

}



location /_nuxt/ {

  alias /path/to/your/dist/_nuxt/;

  expires 1y;

  add_header Cache-Control "public, immutable";

}

再检查下 nuxt.config.ts 里别乱设 app.baseURL，静态生成时留空就行，应该能用。

2026-02-23 22:22