Nuxt3项目初始化后执行npm install报错的问题求助

我用npx nuxi init <project name>创建Nuxt3新项目，执行npm install时终端出现大量错误。删除lock文件、更换yarn/pnpm包管理器后问题依旧。

环境版本 #

• Windows: Windows_NT 10.0.19044
• Node: v16.13.0
• Npm: v9.0.1
• Nuxt: 3.3.1

错误日志 #

× Client
  Compiled with some errors in 9.90s

( ) Server

Hash: 2c24c5888bf3b1c1c416                                                                                    13:31:53
Version: webpack 4.46.0
Time: 9899ms
Built at: 15/03/2023 1:31:53 pm
     Asset       Size  Chunks               Chunk Names
0f675ac.js   2.29 KiB       2  [immutable]  runtime
12a4221.js   4.75 KiB       4  [immutable]
1ab12b9.js   44.4 KiB       0  [immutable]  app
393869b.js    184 KiB       3  [immutable]  vendors/app
  LICENSES  336 bytes
ec6d84d.js   72.1 KiB       1  [immutable]  commons/app
Entrypoint app = 0f675ac.js ec6d84d.js 393869b.js 1ab12b9.js

WARNING in ./.nuxt/router.js 19:8-14
"export 'default' (imported as 'Router') was not found in 'vue-router'
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./.nuxt/client.js

WARNING in ./.nuxt/router.js 34:19-25
"export 'default' (imported as 'Router') was not found in 'vue-router'
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./.nuxt/client.js

// The WARNING continues for about 20 more items
//...
//...

ERROR in ./node_modules/vue-router/dist/vue-router.mjs 2157:18-26
Can't import the named export 'computed' from non EcmaScript module (only default export is available)
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./.nuxt/client.js

ERROR in ./node_modules/vue-router/dist/vue-router.mjs 2158:30-38
Can't import the named export 'computed' from non EcmaScript module (only default export is available)
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./.nuxt/client.js

// The ERROR continues for about 20 more items.
//...
//...

 ERROR  Nuxt build error                                                                                      13:31:53

  at WebpackBundler.webpackCompile (C:\Users\user\node_modules\@nuxt\webpack\dist\webpack.js:2127:21)
  at processTicksAndRejections (node:internal/process/task_queues:96:5)
  at async WebpackBundler.build (C:\Users\user\node_modules\@nuxt\webpack\dist\webpack.js:2076:5)
  at async Builder.build (C:\Users\user\node_modules\@nuxt\builder\dist\builder.js:327:5)
  at async Object.invoke (/C:/Users/user/projects/noah2/node_modules/nuxi/dist/chunks/prepare.mjs:45:5)
  at async _main (/C:/Users/user/projects/noah2/node_modules/nuxi/dist/cli.mjs:49:20)

npm ERR! code 1
npm ERR! path C:\Users\user\projects\noah2
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c nuxt prepare

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\user\AppData\Local\npm-cache\_logs\2023-03-15T05_31_37_102Z-debug-0.log

解决方案 #

1. 升级Node.js版本
   当前Node v16.13.0版本较旧，Nuxt3要求最低Node v16.14.0+，建议升级到v18.x LTS版本后重新尝试。

2. 彻底清理缓存与依赖
   执行以下命令清除残留文件后重新安装：

   npm cache clean --force
   rm -rf node_modules package-lock.json yarn.lock pnpm-lock.yaml
   npm install
   

3. 锁定兼容的vue-router版本
   在package.json中添加指定版本的vue-router（与Nuxt3.3.1匹配的vue-router@4.2.5）：

   "dependencies": {
     "vue-router": "4.2.5"
   }
   

   保存后重新执行npm install。

4. 配置webpack处理ES模块
   在nuxt.config.ts中添加webpack规则，解决.mjs模块导入问题：

   export default defineNuxtConfig({
     webpack: {
       module: {
         rules: [
           {
             test: /\.mjs$/,
             include: /node_modules/,
             type: 'javascript/auto'
           }
         ]
       }
     }
   })
   

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