Nuxt 3项目构建报错：vite包缺少./preload-helper导出

执行npm run dev时项目运行正常，但执行npm run build构建时出现以下错误：

[vite:resolve] Missing "./preload-helper" export in "vite" package

使用的Nuxt版本：3.0.0-rc.6

package.json 配置 #

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "test:unit": "vitest --config ./vitest.config.js"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "~3.0.0",
    "@vue/test-utils": "~2.0.0",
    "jsdom": "~20.0.0",
    "nuxt": "3.0.0-rc.6",
    "sass": "^1.53.0",
    "sass-loader": "^13.0.2",
    "vitest": "~0.18.0"
  }
}

nuxt.config.ts 配置 #

import { defineNuxtConfig } from 'nuxt';

export default defineNuxtConfig({
  autoImports: {
    dirs: [
      // Scan composables from nested directories
      'composables/**'
    ]
  },
  css: ["@/assets/styles/main.scss"],
  vite: {
      css: {
          preprocessorOptions: {
              scss: {
                additionalData: '@import "@/assets/styles/variables.scss";'
              }
          }
      }
  }
})

tsconfig.json 配置 #

{
  // https://v3.nuxtjs.org/concepts/typescript
  "extends": "./.nuxt/tsconfig.json"
}

错误原因及修复方案 #

原因 #

该错误源于Nuxt 3.0.0-rc.6依赖的Vite版本与项目中隐式安装的Vite版本不兼容：./preload-helper是特定Vite版本的导出项，而你使用的@vitejs/plugin-vue@3.0.0会自动拉取Vite 3.x版本，和Nuxt rc.6要求的Vite 2.x版本冲突，导致构建时解析失败。

修复步骤 #

• 方案一：锁定兼容的Vite版本

  1. 在package.json的devDependencies中添加明确的Vite 2.x版本：

     "devDependencies": {
       // ...其他依赖
       "vite": "~2.9.15"
     }
     

  2. 清理现有依赖：

     rm -rf node_modules package-lock.json
     

  3. 重新安装依赖并构建：

     npm install
     npm run build
     

• 方案二：升级Nuxt版本
  将Nuxt升级到rc.12及以上版本，这些版本已适配Vite 3.x，可从根源解决版本冲突问题。修改package.json中的Nuxt版本后，重复上述清理、重新安装依赖的步骤即可。

内容的提问来源于stack exchange，提问作者Camille Sébastien Niessen