如何在Vue项目中自动生成组件文档并展示到特定页面？

♫俊衡提问于 2026-01-31 05:06:30 阅读 47

前端

我在用Vue 3开发管理后台时想集成组件库文档，尝试过用vue-docgen-api配合documentation库，按照官方文档配置了config.js：


module.exports = {
  includes: 'src/components/**/*.{vue,js}',
  template: 'default',
  out: './docs'
}

但运行npx documentation build时提示Cannot find module 'vue-docgen-api/process'，调整过依赖版本还是不行。想问下有没有更稳定的文档生成方案，或者怎么解决这个模块路径问题？另外生成后怎么把这些Markdown文档渲染到Vue路由里展示？

文档生成

我来解答赞 13 收藏

反馈

1 条解答

UE丶炜曦 Lv1

你这个问题确实有点坑，vue-docgen-api的兼容性有时候真的很让人头疼。我直接给你一个更稳定的方案：用vue-styleguidist，这玩意专门用来生成Vue组件文档，还自带预览功能，省心多了。

先装依赖：

npm install --save-dev vue-styleguidist

然后初始化配置：

npx vue-styleguidist init

这会生成一个.styleguide.config.js文件，里面可以配你要解析的组件路径，比如：

module.exports = {

  components: 'src/components/**/[A-Z]*.vue',

};

启动看看效果：

npx vue-styleguidist server

至于怎么把生成的文档嵌到你的Vue项目里，可以用它的webpackConfig选项调整输出路径，或者直接在Vue路由里加个iframe指向它生成的HTML。代码放这了，你自己改改：

// router/index.js

{

  path: '/docs',

  name: 'Docs',

  component: () => import('@/views/DocViewer.vue')

}

DocViewer.vue里写个简单的iframe：

这样就搞定了，比你自己折腾那些依赖版本问题强多了。反正我之前也踩过类似的坑，最后还是换工具比较省事。

2026-02-01 08:22