---
title: "示例"
description: "Nuxt Kit 实用工具使用示例。"
canonical_url: "https://nuxt.zhcndoc.com/docs/4.x/api/kit/examples"
---
# 示例

> Nuxt Kit 实用工具使用示例。

## 访问 Nuxt Vite 配置

如果你正在构建一个需要访问 Nuxt 使用的运行时 Vite 或 webpack 配置的集成，可以使用 Kit 实用工具来提取这些配置。

已有一些项目这样做的示例：

- [histoire](https://github.com/histoire-dev/histoire/blob/main/packages/histoire-plugin-nuxt/src/index.ts)
- [nuxt-vitest](https://github.com/danielroe/nuxt-vitest/blob/main/packages/nuxt-vitest/src/config.ts)
- [@storybook-vue/nuxt](https://github.com/storybook-vue/storybook-nuxt/blob/main/packages/storybook-nuxt/src/preset.ts)

下面是一个简短的示例，演示如何从项目中访问 Vite 配置；你也可以采用类似的方法来获取 webpack 配置。

```js
import { buildNuxt, loadNuxt } from '@nuxt/kit'

// https://github.com/nuxt/nuxt/issues/14534
async function getViteConfig () {
  const nuxt = await loadNuxt({ cwd: process.cwd(), dev: false, overrides: { ssr: false } })
  return new Promise((resolve, reject) => {
    nuxt.hook('vite:extend', (config) => {
      resolve(config)
      throw new Error('_stop_')
    })
    buildNuxt(nuxt).catch((err) => {
      if (!err.toString().includes('_stop_')) {
        reject(err)
      }
    })
  }).finally(() => nuxt.close())
}

const viteConfig = await getViteConfig()
console.log(viteConfig)
```


## Sitemap

See the full [sitemap](https://nuxt.zhcndoc.com/sitemap.md) for all pages.