如何在Turborepo Vue monorepo中导入Storybook组件

现有项目目录结构：

• apps/
  • app1/
  • app2/
• package/
  • storybook/
  • hooks/
• 根目录配置文件：package.json、package-lock.json

按以下步骤配置即可实现从storybook包直接导入组件到Vue应用使用：

1. 配置根目录工作区 #

打开根目录package.json，添加workspaces字段声明所有子包路径，注意路径和你实际目录名完全匹配：

{
  "name": "your-monorepo-root",
  "private": true,
  "workspaces": [
    "apps/*",
    "package/*"
  ]
  // 其他原有配置保持不变
}

你当前用npm作为包管理器，直接配置该字段即可；如果后续换pnpm，需要额外在根目录新建pnpm-workspace.yaml声明相同的工作区路径。

2. 配置storybook子包的导出规则 #

打开package/storybook/package.json，确认包名、入口配置正确，包名必须和你import时写的字符串完全一致：

{
  "name": "storybook",
  "private": true,
  "main": "./src/index.js",
  "module": "./src/index.js",
  "exports": {
    ".": "./src/index.js"
  }
  // 其他原有storybook相关配置保持不变
}

如果你的项目用TypeScript，把上面入口文件的后缀改成.ts即可。
在package/storybook/src/下新建入口文件index.js（或ts），统一对外导出需要暴露的组件：

// 路径按你实际的组件存放位置调整
import MyCustomButton from './components/MyCustomButton.vue'

// 单组件默认导出（对应你预期的直接import写法）
export default MyCustomButton

// 如果要导出多个组件，用命名导出即可，引入时加花括号解构
// export { MyCustomButton, OtherComponent }

3. 给Vue应用添加内部依赖 #

进入你需要使用组件的应用目录（比如apps/app1），执行npm命令关联内部storybook包：

npm install storybook -w app1

执行完成后打开apps/app1/package.json，能看到dependencies里出现"storybook": "*"即说明依赖关联成功。

4. 配置构建工具转译规则 #

默认构建工具不会转译node_modules下的文件，而内部storybook包的Vue单文件组件需要编译处理，否则会报错：

• 若应用用Vite构建，修改apps/app1/vite.config.js：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  optimizeDeps: {
    exclude: ['storybook']
  },
  build: {
    commonjsOptions: {
      transformMixedEsModules: true,
      include: [/storybook/]
    }
  }
})

• 若应用用Vue CLI（Webpack）构建，修改apps/app1/vue.config.js：

module.exports = {
  transpileDependencies: ['storybook']
}

5. 验证使用 #

重启Vue应用的开发服务，即可按预期写法引入组件：

<template>
 <div>
   <my-custom-button />
 </div>
</template>
<script>
 import MyCustomComponent from 'storybook';
 export default {
   components: {
     MyCustomComponent
   }
 }
</script>

注意：如果后续你在storybook包中用命名导出多组件，引入时需要加花括号，比如import { MyCustomButton } from 'storybook'，对应注册组件名即可。

内容的提问来源于stack exchange，提问作者power-cut