Nuxt3部署Firebase构建阶段Vue包版本不匹配问题求助

问题背景 #

使用Nuxt3 RC11版本尝试将SSR应用部署到Firebase Hosting（配合云函数实现SSR），遵循相关教程操作，但部署过程中遇到依赖冲突问题。

配置信息 #

package.json #

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "firebase:start:import_export": "firebase emulators:start --import=./test/ --export-on-exit=./exported_datas/",
    "firebase:export": "firebase emulators:export ./test/",
    "deploy": "firebase deploy --only functions && firebase deploy --only hosting",
    "clean": "rm -rf .nuxt .output dist node_modules *.log",
    "clean_all": "npm run clean && rm -rf functions/node_modules functions/nuxt"
  },
  "devDependencies": {
    "@intlify/unplugin-vue-i18n": "^0.5.0",
    "@typescript-eslint/eslint-plugin": "^5.33.1",
    "@typescript-eslint/parser": "^5.33.1",
    "autoprefixer": "^10.4.8",
    "eslint": "^8.22.0",
    "eslint-plugin-vue": "^9.3.0",
    "nuxt": "^3.0.0-rc.11",
    "postcss": "^8.4.16",
    "vue-i18n": "^9.2.2"
  },
  "dependencies": {
    "@headlessui/vue": "^1.6.7",
    "@heroicons/vue": "^2.0.10",
    "@nuxtjs/i18n": "^7.3.0",
    "@sendgrid/mail": "^7.7.0",
    "bulma": "^0.9.4",
    "bulma-carousel": "^4.0.24",
    "firebase": "^9.9.3",
    "firebase-functions": "^3.23.0",
    "firebase-tools": "^11.8.0",
    "nuxt-start": "^2.15.8",
    "uuid": "^8.3.2"
  }
}

firebase.json #

{
  "database": {
    "rules": "./firebase_rules/database.rules.json"
  },
  "hosting": {
    "predeploy": [
      "rm -rf public/* && mkdir -p public/_nuxt && cp -r .nuxt/dist/client/ public/_nuxt && cp -a static/. public/"
    ],
    "public": "public",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
     "rewrites": [
      {
        "source": "**",
        "function": "ssrapp"
      }
    ]
  },
  "storage": {
    "rules": "./firebase_rules/storage.rules"
  },
  "functions": {
    "runtime": "nodejs16",
    "source": "functions",
    "predeploy": [
      "npm run build && rm -rf functions/nuxt && cp -r .nuxt/ functions/nuxt/ && cp nuxt.config.ts functions/"
    ]
  },
  "emulators": {
    "hosting": {
      "port": 3001
    },
    "ui": {
      "enabled": true
    },
    "database": {
      "port": 9000
    },
    "storage": {
      "port": 9199
    },
    "functions": {
      "port": 5001,
      "host": "localhost"
    },
    "auth": {
      "port": 9099
    }
  }
}

错误现象 #

单独执行npm run build时构建正常，但Firebase预部署命令触发相同build步骤时，抛出以下错误：

Error: Failed to load function definition from source: Failed to generate manifest from function source: Error: 

Vue packages version mismatch:

- vue@3.2.41
- vue-server-renderer@2.7.13

解决思路 #

1. 移除Nuxt2依赖nuxt-start #

nuxt-start@2.15.8是Nuxt2的启动依赖，会自动引入Vue2版本的vue-server-renderer，和Nuxt3依赖的Vue3产生冲突。执行以下命令移除该依赖：

npm uninstall nuxt-start

2. 适配Nuxt3构建产物路径 #

Nuxt3 RC版本的构建产物默认输出到.output目录，而非Nuxt2的.nuxt目录。需要修改firebase.json中的预部署脚本：

• Hosting预部署脚本修改为：

  "predeploy": [
    "rm -rf public/* && mkdir -p public/_nuxt && cp -r .output/public/* public/ && cp -a static/. public/"
  ]
  

• Functions预部署脚本修改为：

  "predeploy": [
    "npm run build",
    "rm -rf functions/nuxt functions/nuxt.config.ts",
    "cp -r .output/server/ functions/nuxt/",
    "cp nuxt.config.ts functions/"
  ]
  

3. 彻底清理缓存与旧依赖 #

执行你已定义的清理脚本，确保没有残留的旧构建产物和依赖：

npm run clean_all

然后重新安装依赖：

npm install

4. 隔离Functions目录依赖 #

确保functions目录下的package.json只包含云函数必需的依赖（如firebase-functions、firebase-admin），不要包含Nuxt相关依赖。部署时Firebase会自动为Functions安装依赖，避免和根目录的Nuxt3依赖混淆。

5. 升级Nuxt到最新RC版本 #

RC版本的Nuxt3持续修复问题，尝试升级到最新版本：

npm install nuxt@latest --save-dev

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