shared/
目录允许你共享可以在 Vue 应用和 Nitro 服务器中共用的代码。
shared/
目录在 Nuxt v3.14+ 版本中可用。shared/
目录中的代码不能导入任何 Vue 或 Nitro 的代码。为了防止破坏现有项目,Nuxt v3 默认未启用自动导入。要使用这些自动导入的工具函数和类型,必须先在
nuxt.config.ts
中设置 future.compatibilityVersion: 4
。使用方法
方法 1: 命名导出
shared/utils/capitalize.ts
export const capitalize = (input: string) => {
return input[0] ? input[0].toUpperCase() + input.slice(1) : ''
}
方法 2: 默认导出
shared/utils/capitalize.ts
export default function (input: string) {
return input[0] ? input[0].toUpperCase() + input.slice(1) : ''
}
现在你可以在 Nuxt 应用和 server/
目录中使用自动导入的工具函数。
app.vue
<script setup lang="ts">
const hello = capitalize('hello')
</script>
<template>
<div>
{{ hello }}
</div>
</template>
server/api/hello.get.ts
export default defineEventHandler((event) => {
return {
hello: capitalize('hello')
}
})
文件扫描方式
只有 shared/utils/
和 shared/types/
目录中的文件会被自动导入。这些目录的子目录中的文件不会自动导入,除非你将子目录添加到 imports.dirs
和 nitro.imports.dirs
中。
目录结构
-| shared/
---| capitalize.ts # 不自动导入
---| formatters
-----| lower.ts # 不自动导入
---| utils/
-----| lower.ts # 自动导入
-----| formatters
-------| upper.ts # 不自动导入
---| types/
-----| bar.d.ts # 自动导入
你在 shared/
目录创建的其他文件必须用 #shared
别名手动导入(Nuxt 会自动配置该别名):
// 直接位于 shared 目录下的文件
import capitalize from '#shared/capitalize'
// 嵌套目录下的文件
import lower from '#shared/formatters/lower'
// utils 内嵌套文件夹中的文件
import upper from '#shared/utils/formatters/upper'
该别名保证无论导入文件处于何处,导入路径都保持一致。