在 Nuxt 中使用 Vite 插件

了解如何将 Vite 插件集成到您的 Nuxt 项目中。

虽然 Nuxt 模块提供了广泛的功能，但有时特定的 Vite 插件可能更直接地满足您的需求。

首先，我们需要安装 Vite 插件，在我们的示例中，我们将使用 @rollup/plugin-yaml

npm install @rollup/plugin-yaml

接下来，我们需要导入它并将其添加到我们的 nuxt.config.ts 文件中

nuxt.config.ts
import yaml from '@rollup/plugin-yaml'

export default defineNuxtConfig({
  vite: {
    plugins: [
      yaml(),
    ],
  },
})

现在我们已经安装并配置了 Vite 插件，我们可以直接在我们的项目中使用 YAML 文件。

例如，我们可以有一个 config.yaml 文件，它存储配置数据并将这些数据导入到我们的 Nuxt 组件中

greeting: "Hello, Nuxt with Vite!"

在 Nuxt 模块中使用 Vite 插件

如果您正在开发一个 Nuxt 模块并且需要添加 Vite 插件，您应该使用 addVitePlugin 工具

modules/my-module.ts
import { addVitePlugin, defineNuxtModule } from '@nuxt/kit'
import yaml from '@rollup/plugin-yaml'

export default defineNuxtModule({
  setup () {
    addVitePlugin(yaml())
  },
})
如果您正在编写需要访问已解析的 Vite 配置的代码，您应该在您的 Vite 插件中使用 config 和 configResolved 钩子，而不是使用 Nuxt 的 vite:extend、vite:extendConfig 和 vite:configResolved。
在 Nuxt Kit 文档中阅读更多关于 addVitePlugin 的信息。