Nuxt 3 中哪里可以放置任意代码？

Question

由于 Nuxt 3 中众多文件夹的不同用途，我面临着困惑。我想在 JavaScript 文件中存储一个简单的食物列表数组并将其导出，但我不确定放置此文件的适当位置。

这是我的 food.js 文件：

export const food = ['apple', 'banana', 'some random fruit']

通常，如果我不使用 Nuxt 3，我会将

food.js

文件放在将使用它的组件旁边，如下所示：

但是，在 Nuxt 3 中，这种方法不再可行，因为由于 Nuxt 3 的机制，我的

food.js

文件将自动注册为组件。

将

food.js

放在

composables/

文件夹中没有意义，因为它只是一个静态文件。

尽管将

food.js

放在

utils/

文件夹中似乎很合理，但

utils/

文件夹不会扫描嵌套文件夹以进行自动注册。例如：

如果我的

utils/

文件夹如下所示：

Nuxt 3 只会自动导入

formatDate.js

并忽略

food.js

。我必须手动导入

food.js

，这偏离了 Nuxt 3 约定，并可能使项目的理解变得复杂。此外，

utils/

文件夹不是存储此类任意代码的理想位置。

因此，我正在寻求有关在 Nuxt 3 中存储此类任意代码的最佳位置的建议。

Answer 1

Nuxt 无法扫描

/utils

子文件夹可以通过两种方式绕过。

您可以创建文件

/utils/index.js

并从要在应用程序中使用的子文件夹中重新导出功能：

// index.js
export { food } from './foodApp/food.js'

第二个选项是手动定义文件夹以在内部自动导入

defineNuxtConfig

:

imports: {
  dirs: [
    'utils/**'
  ]
}

您甚至可以自动导入完全任意文件夹，但我还没有尝试过。

最后但并非最不重要的一点 - 创建您自己的任何名称的文件夹绝对没有问题。唯一的问题是您必须处理手动导入（或使用配置）。未来存在一些潜在的风险，Nuxt 将添加一些更多的专用文件夹，而您的文件夹将与之发生冲突。