如何成功部署Nuxtjs+Firebase应用到Vercel？解决函数超限问题

问题分析 #

你的应用是静态Nuxt项目（target:static、ssr:false），但部署时生成的Serverless函数体积达50.5MB，超过Vercel的50MB限制。核心原因是当前配置错误生成了不必要的Serverless函数，且Firebase SDK未按需加载导致包体积过大。

具体解决方案 #

1. 启用Firebase懒加载，减少SDK打包体积 #

修改nuxt.config.js中的Firebase配置，将lazy设为true，这样只会按需加载你用到的Firebase服务（Firestore、Storage），避免打包完整SDK：

firebase: {
  lazy: true, // 原配置为false，改为true
  onFirebaseHosting: false,
  terminateDatabasesAfterGenerate: true,
  // 其他config、services配置保持不变
}

2. 修改Vercel配置，改用静态部署模式 #

你的项目是纯静态站点，无需生成Serverless函数。修改vercel.json，使用Vercel静态构建器替代Nuxt专属构建器：

{
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/static-build",
      "config": {
        "distDir": "dist"
      }
    }
  ]
}

Vercel会自动执行package.json中的generate命令，生成并部署dist目录下的静态文件，彻底规避Serverless函数体积问题。

3. 优化依赖配置 #

将@nuxtjs/vercel-builder移到devDependencies（生产环境无需此依赖），修改package.json：

"dependencies": {
  "@nuxtjs/date-fns": "^1.5.0",
  "@nuxtjs/firebase": "^8.2.0",
  "core-js": "^3.19.3",
  "dotenv": "^16.0.3",
  "firebase": "9.6.2",
  "fs": "^0.0.1-security",
  "nuxt": "^2.15.8",
  "vue": "^2.6.14",
  "vue-server-renderer": "^2.6.14",
  "vue-template-compiler": "^2.6.14",
  "webpack": "^4.46.0"
},
"devDependencies": {
  "@nuxtjs/vercel-builder": "0.22.1",
  "push-dir": "^0.4.1",
  "sass": "^1.54.8",
  "sass-loader": "^10.1.1"
}

4. 启用Nuxt构建拆分优化 #

在nuxt.config.js的build配置中添加代码拆分，进一步减小单个文件体积：

build: {
  splitChunks: {
    layouts: true,
    pages: true,
    commons: true
  },
  // 原有的sass loader配置保持不变
}

部署验证 #

修改完成后，推送到GitHub仓库，触发Vercel自动部署。此时Vercel会生成纯静态资源，不再创建Serverless函数，体积超限问题即可解决。

内容的提问来源于stack exchange，提问作者Abdelrhman Gad