Histoire配置求助：独立Vue组件npm包启动Histoire时持续报错

核心配置调整步骤 #

1. 适配多包结构的Histoire配置 #

修改histoire/histoire.config.js，明确组件包路径并配置Vite解析规则：

import { defineConfig } from 'histoire'
import { HstVue } from '@histoire/plugin-vue'

export default defineConfig({
  plugins: [HstVue()],
  vite: {
    resolve: {
      alias: [
        { find: '@pkg1', replacement: './packages/pkg1/src' },
        { find: '@pkg2', replacement: './packages/pkg2/src' }
      ]
    },
    optimizeDeps: {
      include: ['vue']
    }
  },
  stories: [
    './packages/**/*.story.vue'
  ]
})

2. 组件包配置兼容处理 #

每个组件包的vite.config.js需简化，避免与Histoire的Vite实例冲突：

• 移除包内的server端口、build输出等全局配置项
• 确保包的package.json中main/module字段指向编译产物，同时保留src目录供Histoire加载源码

3. 依赖完整性检查 #

确认已安装必需依赖：

npm install --save-dev histoire @histoire/plugin-vue

4. 规范Story文件写法 #

每个组件的story文件（如Button.story.vue）遵循Histoire Vue语法：

<script setup>
import Button from './Button.vue'
</script>

<template>
  <Story title="基础按钮">
    <Variant title="默认状态">
      <Button>点击我</Button>
    </Variant>
  </Story>
</template>

常见错误排查点 #

• 路径解析：确认Histoire配置的stories路径能覆盖所有组件包的story文件，别名配置正确指向包源码
• Vite配置冲突：检查组件包内的Vite配置是否有重复的resolve、optimizeDeps等选项
• 版本兼容：确保Vue、Histoire及@histoire/plugin-vue的版本相互匹配

内容的提问来源于stack exchange，提问作者Ratbwoi