无法在 nuxt3 中获取动态导入的模块

Question

我正在学习 nuxt3，我一直被这个问题困扰，并且我已经浏览了一些有关此错误的帖子，但所有解决方案都不适合我。我正在开发一个 nuxt3 应用程序，带有来自kevinmarrec/nuxt-pwa-module的 vuetify、Bootstrap 和 pwa 模块。

当我使用 npm run dev 运行应用程序时，一切似乎都开始正常构建，但是在首先加载页面后，我得到了页面“Hello nuxt”的正确视图，但在 2-4 秒内页面更改为：

500 无法获取动态导入的模块：http://localhost:3000/_nuxt/pages/index.vue

我尝试在 Windows 10 和内核：Linux 6.0.0-kali6-amd64 上解决此问题，但没有成功。在这两个平台上我都使用节点 v18.14.1。

索引.vue

      <template>
         <div>
            <h1>Hello nuxt</h1>
       </div>
     </template>
     <script>
        export default { }
     </script>
     <style scoped> </style>

以下是plugins文件夹中vuetify.ts文件的配置

     import { createVuetify } from 'vuetify'
     import * as components from 'vuetify/components'
     import * as directives from 'vuetify/directives'

     export default defineNuxtPlugin(nuxtApp => {
          const veutify = createVuetify({
                    ssr: true,
                    components,
                    directives,
            });
      nuxtApp.vueApp.use(veutify)
     });

以下是nuxt.config.ts文件的配置

     export default defineNuxtConfig({
     nitro: {
        esbuild: {
          options: {
          target: 'esnext'
            }
         }
       },
     css: ["vuetify/lib/styles/main.sass",
         '@mdi/font/css/materialdesignicons.min.css',
         "bootstrap/dist/css/bootstrap.min.css"
         ],
    build: {
      transpile: ["vuetify"],
     },
   vite: {
    define: {
        "process.env.DEBUG": false,
        },
    },
   modules: ['@kevinmarrec/nuxt-pwa'],
   pwa: {
      workbox: {
      enabled: true
        }
   },
   runtimeConfig: {
       public: {
         BASE_URL: 'some fallback value',
        },
   },
})

package.json文件

    {
      "private": true,
      "scripts": {
      "build": "nuxt build",
      "dev": "nuxt dev",
      "generate": "nuxt generate",
      "preview": "nuxt preview",
      "postinstall": "nuxt prepare"
    },
      "devDependencies": {
        "@kevinmarrec/nuxt-pwa": "^0.16.2",
        "@nuxtjs/pwa": "^3.3.5",
        "nuxt": "^3.2.2"
       },
     "dependencies": {
       "@mdi/font": "^7.1.96",
       "bootstrap": "^5.2.3",
       "sass": "^1.58.3",
       "vee-validate": "^4.7.4",
       "vuetify": "^3.1.5"
        }
       }

下面是我收到的错误

在控制台上我收到此错误和警告

最后这个警告如下

我到底做错了什么触发了这个，这似乎是一大块。？

Answer 1

我也遇到了同样的错误。我解决了它运行cleanup命令 -

npx nuxi clean|cleanup [rootDir]

然后

npm run dev 

文档链接

cleanup 命令会删除常见生成的 Nuxt 文件和缓存，包括：

• .nu​​xt
• 。输出
• 节点模块/.vite
• 节点模块/.cache