标签: nuxt3

我尝试使用turborepo 在 monorepo 中安装 Nuxt 3 层。我不知何故在打字稿中遇到错误，它似乎无法弄清楚 nuxt

找不到defineNuxtConfig

找不到应用程序配置

ts 配置文件如下所示：

{
  "extends": "./.playground/.nuxt/tsconfig.json"
}

在 .playground/.nuxt 文件夹上有 tsconfig ，如下所示（自动生成）：

// Generated by nuxi
{
  "compilerOptions": {
    "forceConsistentCasingInFileNames": true,
    "jsx": "preserve",
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Node",
    "skipLibCheck": true,
    "strict": true,
    "allowJs": true,
    "noEmit": true,
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    "types": [
      "node"
    ],
    "baseUrl": "..",
    "paths": {
      "~": [
        "."
      ],
      "~/*": [
        "./*"
      ],
      "@": [
        "."
      ],
      "@/*": [
        "./*"
      ],
      "~~": [
        "."
      ],
      "~~/*": [ …

我不知道如何在 Nuxt3 中观看路线。

在 Nuxt2 中，在任何组件中制作它都非常容易。有谁知道我如何在 Nuxt3 中写这个？

<script>
export default {
  ....
  watch: {
    $route(to, from) {
      console.log('route change to', to)
      console.log('route change from', from)
    },
  },
  ....
}
</script>

我有一些类型想要在我的 nuxt 3 应用程序中自动导入，但是每次我尝试导出包含类型的 ts 文件时，它都会以某种方式跳过或忽略这些类型。我找到了一种将它们全局导入到所有打字稿文件的方法，但我希望它们也位于 .vue 文件中。

我有这个文件和我的类型。

useType.ts

export type ImageDocument = {
    buildId: string

    links: string[]
}

export type InventoryDocument = {
    buildId: string
    block: string
    count: number
}

该文件位于 /utils 文件夹中。我还尝试将其移至可组合项文件夹，但没有任何区别。

当您在服务器 API 端执行简单的控制台登录时，当您使用pnpm run dev.

但是，如果您使用 构建它pnpm run build并运行index.mjs，控制台日志将会显示。

代码：

export default defineEventHandler(async (event) => {
  console.log('HAHAHAHAHA');

  return 'LOGIN!';
});

这是我的npx nuxi info：

------------------------------
- Operating System: `Linux`
- Node Version:     `v18.12.1`
- Nuxt Version:     `3.0.0`
- Nitro Version:    `1.0.0`
- Package Manager:  `pnpm@7.22.0`
- Builder:          `vite`
- User Config:      `app`, `runtimeConfig`, `modules`, `ssr`, `vite`, `typescript`, `css`, `build`
- Runtime Modules:  `@app/ui@1.0.0-alpha`, `nuxt-icon@0.1.8`, `@pinia/nuxt@0.4.6`
- Build Modules:    `-`
------------------------------

我想将 Socket.IO 与我的 Nuxt 3 应用程序一起使用，以便 Nuxt 应用程序和 Socket.IO 服务器共享相同的端口，并且一旦 Nuxt 应用程序准备就绪，Socket.IO 服务器就会自动启动。

我探索了五种不同的解决方案，但它们都有各自的缺点：

解决方案 1：使用nuxt-socket-io。在这里，自述文件提到了一种让模块与 Nuxt 3 和更新的 Socket.io 版本一起使用的解决方法，但是该解决方法会导致 404 页面，因为存储库的作者完全禁用了这些问题，并且似乎没有维护该模块不再有。

TL; 博士：不起作用，没有支持。

解决方案 2：使用nuxt3-socket.io。这会产生此错误。

更新（2024 年 1 月）：该模块目前似乎在开发和生产中都运行良好，并且非常易于使用。但是，我目前无法热重载（socket.io 服务器）来使用此解决方案，即使在修改文件时硝基会重新加载。我希望这个问题能够得到解决。

这个问题表明存在潜在的兼容性问题，但我无法重现（在 macOS 上）。

TL; dr：效果很好，易于使用，但没有（socket.io 服务器的）热重载，并且可能无法在每个平台上工作。（这是我目前首选的解决方案）

解决方案 3： \n使用 Nuxt 中间件启动 Socket.io 服务器，如此处所述。 \n此方法通常有效，但 Socket.io 服务器在请求“/ws”路由之前不会启动，因此需要额外的客户端代码。

太棒了；通常可以工作，但 Socket.io 不会自动启动。

解决方案 4： …

有一些教程（例如https://medium.com/geekculture/chart-js-in-nuxt-js-how-to-implement-c255a2657b02）展示了如何将 Chart.js 与早期版本的 Nuxt 集成3 甚至 Nuxt 2。但它们由于各种原因不起作用。本教程例如 https://dev.to/anggakswr/chart-js-in-nuxt-js-4hjf 会导致 500 错误：

Cannot read properties of undefined (reading 'component')

at ./plugins/charts.js:6:31
at async ViteNodeRunner.directRequest (./node_modules/vite- 
node/dist/client.mjs:331:5)

此外，还有不同的方法：一个教程/示例使用“Nuxt 插件”方式，另一种使用“Nuxt 组件”方式......

我尝试了基于此处文档的插件方式：https ://nuxt.com/docs/guide/directory-struct/plugins#vue-plugins ：

// plugins/charts.js

import { Bar } from "vue-chartjs"

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(Bar)
})

但一旦我运行npm run dev，我就会收到此警告：

[Vue warn]：插件必须是一个函数或具有“安装”函数的对象。

然后：

[Vue warn]: Failed to resolve component: BarChart
If this is a native custom element, make sure to exclude it from component resolution …

我正在学习 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) …