Storybook + Vue3 项目使用自定义指令出现报错该如何解决？

云上老周

2026-10-3

问题成因分析

Vue3项目中全局注册的自定义指令是挂载在项目入口初始化的app实例上，而Storybook运行时会创建独立的Vue实例渲染组件，默认不会加载项目里的全局注册逻辑，所以找不到对应指令触发报错。

解决方案

方案1：Storybook全局注册指令（适合全量stories共用的指令）

找到项目中.storybook/preview.js文件，添加全局注册逻辑即可：

import { app } from '@storybook/vue3'

// 直接注册指令，也可以引入项目中抽离的指令定义文件复用代码
app.directive('red-bg', {
  beforeMount: (element, binding) => {
    element.style.backgroundColor = "red";
  }
});

// 如果是用Vue插件统一注册全局指令/组件，直接调用app.use即可
// app.use(你的全局插件)

方案2：单Story单独注册指令（适合仅部分组件使用的指令）

在对应组件的stories配置文件中，添加局部装饰器注册指令，不需要全局注册污染所有story：

import MyComponent from './MyComponent.vue'

export default {
  title: 'Example/MyComponent',
  component: MyComponent,
  decorators: [
    (story, context) => {
      context.app.directive('red-bg', {
        beforeMount: (element, binding) => {
          element.style.backgroundColor = "red";
        }
      })
      return story()
    }
  ]
}