Skip to content

构建 API

VitePress 提供了一组构建相关的 API,用于配置站点、编程式构建和创建开发服务器。

defineConfig

类型安全的配置定义函数。

类型签名

ts
function defineConfig(config: UserConfig): UserConfig
function defineConfig(config: Promise<UserConfig>): Promise<UserConfig>
function defineConfig(config: (env: ConfigEnv) => UserConfig): UserConfig

基础用法

ts
// .vitepress/config.mts
import { defineConfig } from 'vitepress'

export default defineConfig({
  title: 'My Site',
  description: 'A VitePress site'
})

异步配置

ts
export default defineConfig(async () => {
  const data = await fetchPosts()
  return {
    // 使用异步数据
  }
})

环境感知配置

ts
export default defineConfig(({ mode }) => {
  return {
    base: mode === 'production' ? '/docs/' : '/'
  }
})

build

编程式构建站点。

类型签名

ts
function build(root?: string): Promise<void>

用法

ts
import { build } from 'vitepress'

// 构建当前目录
await build()

// 构建指定目录
await build('docs')

构建选项

构建行为由配置文件控制,主要选项:

选项类型说明
outDirstring输出目录,默认 .vitepress/dist
cacheDirstring缓存目录
cleanUrlsboolean清洁 URL

createServer

创建开发服务器实例。

类型签名

ts
function createServer(root?: string, options?: ServerOptions): Promise<ViteDevServer>

用法

ts
import { createServer } from 'vitepress'

const server = await createServer('docs')

console.log(`Server running at ${server.resolvedUrls?.local}`)

编程式开发

ts
import { createServer } from 'vitepress'

const server = await createServer('docs', {
  port: 3000,
  host: true
})

// 监听事件
server.watcher.on('change', (file) => {
  console.log(`File changed: ${file}`)
})

serve

预览构建结果的服务器。

类型签名

ts
function serve(root?: string, options?: ServeOptions): Promise<void>

用法

ts
import { serve } from 'vitepress'

await serve('docs', {
  port: 4173,
  host: true
})

resolveConfig

解析配置文件,返回完整的配置对象。

类型签名

ts
function resolveConfig(root?: string): Promise<SiteConfig>

用法

ts
import { resolveConfig } from 'vitepress'

const config = await resolveConfig('docs')

console.log(config.site.title)
console.log(config.userConfig)

UserConfig 接口

完整的用户配置类型定义:

ts
interface UserConfig {
  // 站点配置
  title?: string
  titleTemplate?: string | boolean
  description?: string
  
  // 路由配置
  base?: string
  cleanUrls?: boolean
  rewrites?: Rewrite
  
  // 构建配置
  outDir?: string
  cacheDir?: string
  
  // Markdown 配置
  markdown?: MarkdownOptions
  
  // 国际化
  locales?: Locales
  defaultLang?: string
  
  // 主题配置
  themeConfig?: ThemeConfig
  
  // 构建钩子
  transformHead?: (ctx: TransformContext) => Awaitable<HeadConfig[]>
  transformHtml?: (code: string, id: string, ctx: TransformContext) => Awaitable<string | void>
  buildEnd?: (siteConfig: SiteConfig) => Awaitable<void>
  postBuild?: (siteConfig: SiteConfig) => Awaitable<void>
  
  // Vite 配置
  vite?: ViteConfig
}

ConfigEnv 接口

传递给配置函数的环境对象:

ts
interface ConfigEnv {
  // 运行模式
  mode: 'development' | 'production'
  
  // 命令
  command: 'serve' | 'build'
  
  // 是否 SSR
  isServer?: boolean
}

SiteConfig 接口

解析后的完整站点配置:

ts
interface SiteConfig {
  // 用户配置
  userConfig: UserConfig
  
  // 站点配置
  site: SiteData
  
  // 路由配置
  rewrites: Rewrite[]
  
  // 构建配置
  outDir: string
  cacheDir: string
  
  // 临时文件
  tempDir: string
}

最佳实践

配置文件组织

ts
// .vitepress/config.mts
import { defineConfig } from 'vitepress'
import { sharedConfig } from './shared'
import { themeConfig } from './theme'

export default defineConfig({
  ...sharedConfig,
  ...themeConfig,
  
  // 环境特定配置
  vite: {
    build: {
      chunkSizeWarningLimit: 1500
    }
  }
})

类型安全

ts
import { defineConfig, type DefaultTheme } from 'vitepress'

export default defineConfig({
  themeConfig: {
    nav: [
      { text: 'Home', link: '/' }
    ]
  } satisfies DefaultTheme.Config
})

参考链接

贡献者

加载中...

想要成为贡献者?

在 CNB 上参与贡献