Vue Storybook导入私有npm包组件时mixin定义的props无法显示问题

问题原因 #

Storybook 解析 Vue 组件的属性、事件等元信息依赖 vue-docgen-api 工具，该工具只能识别未编译的原始 .vue 源文件中的定义。你发布到私有 npm 仓库的组件属于提前打包编译后的产物，编译过程丢失了 mixin 的原始导入关联信息，所以 vue-docgen-api 无法提取到 mixin 中定义的 props；而本地导入的是未编译的 .vue 源码，工具可以正常解析关联的 mixin 文件，因此不会出现属性丢失的问题。

解决建议 #

• 方案1：组件库发布时保留原始源码
  修改私有组件库的打包发布逻辑，不要仅发布编译后的产物，同步保留完整的 .vue 源文件、mixin 源文件。在 Storybook 中导入组件时，直接指向 npm 包内的原始 .vue 源文件路径即可：

  // 示例：直接导入包内未编译的源文件
  import vxButton from 'vix-ui/src/Components/Button/vxButton.vue';
  

• 方案2：手动补充 argTypes 声明
  如果不想调整组件库的发布规则，可以直接在对应 story 的 argTypes 配置项中手动声明所有 mixin 内的 props，Storybook 会优先展示你手动声明的属性：

  export default {
    title: 'Vix/Button',
    component: vxButton,
    argTypes: {
      // 示例：补充mixin中的stylePreset属性
      stylePreset: {
        control: { type: 'select' },
        options: ['primary', 'secondary', 'alt-light', 'alt-dark'],
        defaultValue: 'primary'
      },
      enabled: {
        control: { type: 'boolean' },
        defaultValue: true
      },
      // 其余mixin中定义的props按照以上格式补充即可
    },
  };
  

• 方案3：调整 Storybook 解析规则
  如果你的组件包已经发布了源码，但 Storybook 默认不解析 node_modules 内的文件，可以在 .storybook/main.js 中添加解析规则，将你的私有组件库纳入解析范围：

  module.exports = {
    // 其余原有配置保持不变
    babel: async (options) => {
      options.include.push(/node_modules\/vix-ui/);
      return options;
    },
    vueDocgen: {
      include: ['../src/**/*.vue', /node_modules\/vix-ui\/.*\.vue$/],
    },
  };
  

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