Nuxt2部署Vercel出现Serverless Function崩溃报错

调试思路 #

• Vercel Serverless运行环境除/tmp目录外全路径只读，日志里的目录创建失败、文件找不到报错，核心原因是构建阶段未将对应资源提前生成到函数产物包内，运行时Nuxt尝试在只读路径执行写入、读取操作直接触发崩溃。
• 先核对构建配置与Nuxt模式的匹配度：Nuxt 2 SSR模式默认需要适配Vercel的构建规则，通用配置会导致.nuxt构建产物、static静态资源、本地内容目录未被正确打入函数包。
• 检查自定义模块的路径逻辑：/var/task/content路径不存在的警告，要么是@nuxt/content模块未做路径适配，要么是自定义代码硬编码了相对路径，未适配Serverless环境的工作目录结构。
• 排查PWA模块配置：sw.js找不到的报错，基本是@nuxtjs/pwa模块的服务工作者未在构建阶段生成到指定目录，运行时读取空路径触发异常。

修复方案 #

• 第一步：安装适配依赖并配置Vercel构建规则
  执行命令安装Vercel官方维护的Nuxt 2构建适配包到生产依赖：

  npm install @nuxtjs/vercel-builder --save
  

  在项目根目录新建vercel.json，写入如下配置，确保构建时Nuxt相关资源被正确打包：

  {
    "builds": [
      {
        "src": "nuxt.config.js",
        "use": "@nuxtjs/vercel-builder",
        "config": {
          "serverFiles": ["package.json", "content/**/*", "static/**/*"]
        }
      }
    ]
  }
  

  到Vercel项目后台检查构建命令配置，不要自定义非标准build命令，SSR模式保持默认构建命令即可，静态生成模式显式设置为npm run generate。

• 第二步：修正nuxt.config.js配置
  打开根目录下的nuxt.config.js，按实际使用的模块做对应调整：

  1. 明确target配置，不要混用SSR和静态生成模式：SSR部署保持target: 'server'，纯静态站设置target: 'static'。
  2. 如果使用@nuxt/content模块，添加路径适配配置，关闭运行时文件监听：

     const path = require('path')
     export default {
       // 其他已有配置
       content: {
         dir: path.join(__dirname, 'content'),
         watch: false
       }
     }
     

  3. 如果使用@nuxtjs/pwa模块，强制构建阶段生成sw.js到static目录：

     export default {
       // 其他已有配置
       pwa: {
         workbox: {
           enabled: process.env.NODE_ENV === 'production',
           generateSw: true,
           swDest: path.join(__dirname, 'static/sw.js')
         }
       }
     }
     

  4. 若仍存在目录写入报错，添加渲染路径配置，将运行时生成的临时文件指向Vercel允许写入的/tmp目录：

     export default {
       // 其他已有配置
       render: {
         dist: {
           publicPath: path.join('/tmp', '.nuxt/dist/client')
         }
       }
     }
     

• 第三步：校验依赖分类与本地构建结果

  1. 检查package.json依赖分类：nuxt、@nuxtjs/vercel-builder、@nuxt/content、@nuxtjs/pwa这类服务端运行需要的依赖，必须放在dependencies节点下，不要放到devDependencies，Vercel生产构建默认不会安装devDependencies下的包，会导致构建缺失模块、产物不全。
  2. 本地执行npm run build，检查构建完成后项目下是否存在.nuxt/dist/client目录、static/sw.js文件，@nuxt/content是否正常解析了content目录下的文件。如果本地构建就缺失对应产物，先排查本地模块版本冲突问题，本地构建正常后再推送代码触发Vercel部署。

验证方法 #

重新触发部署后先查看Vercel构建日志，确认日志中出现“Compiled client successfully”“Generated sw.js”“Parsed X content files”这类成功提示，没有路径不存在的警告。如果部署后仍报错，可在Vercel函数日志页下载函数产物包，检查包内是否包含.nuxt、static、content三个目录的对应文件，缺哪个目录就把对应路径规则加到vercel.json的serverFiles配置中即可。

内容的提问来源于stack exchange，提问作者Udemezue John