shared

shared/ 目录允许你共享既能在 Vue 应用中、也能在 Nitro 服务端中使用的代码。

为什么不能混用 Vue 和 Nitro 代码

Nuxt 会构建两个独立的包：Vue 应用（客户端和服务端渲染）与 Nitro 服务端（API 路由、服务端中间件、服务端插件）。它们被独立打包，并在不同的上下文中运行。shared/ 目录中的代码被两个包同时使用，因此无法从其中任何一方导入。

Nitro 中的 Vue 应用代码

组件和组合式函数需要 Vue 应用运行时，通常还需要 Nuxt 上下文（例如 useNuxtApp() 或 useRoute()），而这些在 Nitro 中都不存在。将它们导入服务端代码可能会导致构建或运行时错误，并可能把 Vue 应用的依赖拉入你的服务端包中。

Vue 应用中的 Nitro 代码

仅服务端的代码（例如 Node API、Nitro 工具函数或服务端路由处理器）绝不能在浏览器中运行。将其导入应用可能会破坏客户端构建、导致浏览器中的运行时错误，或将服务端逻辑泄漏到客户端包中。

仅类型导入

import type 会在编译时被擦除，不会将运行时代码拉入另一个包，因此跨边界仅导入类型可能看似可行。即便如此，仍应将共享类型（例如 API 响应类型）放在 shared/types/ 中，它们会在两种上下文中自动导入。这能让边界清晰、避免日后意外将类型导入变成值导入，并符合 Nuxt 为应用、服务端和共享代码分别设置的类型上下文。