Storybook的index.stories.ts无法导入对应.vue文件的问题如何解决？

你遇到的编译错误可按以下优先级排查解决： #

1. 修复路径导入错误 #

你使用的~是项目框架（如Nuxt/Vite）自定义的路径别名，Storybook默认未加载该别名配置，导致无法解析路径：

• 临时测试可直接改用同目录相对路径，修改导入语句为：

import Test from './index.vue'

• 如需保留~别名使用，需要在Storybook配置文件.storybook/main.js中添加别名解析：
  • 若项目用Vite构建：

  // .storybook/main.js
  import { fileURLToPath } from 'url'
  import { dirname, resolve } from 'path'
  
  export default {
    viteFinal: async (config) => {
      config.resolve.alias['~'] = resolve(dirname(fileURLToPath(import.meta.url)), '../')
      return config
    }
  }
  

  • 若项目用Webpack构建：

  // .storybook/main.js
  const path = require('path')
  
  export default {
    webpackFinal: async (config) => {
      config.resolve.alias['~'] = path.resolve(__dirname, '../')
      return config
    }
  }
  

2. 修复组件渲染写法错误 #

当前你直接返回字符串<Test />不会被Vue解析为组件，需要声明组件引用后再渲染：

export const TestWebsite = () => ({
  components: { Test },
  template: '<Test />'
})

如果是Vue3 + Storybook7及以上版本，也可以直接使用更简洁的 CSF3 写法：

export default {
  title: 'Test',
  component: Test
}

export const Default = {}

3. 确认基础依赖配置 #

• 检查是否已安装对应Vue版本的Storybook渲染器：Vue2对应@storybook/vue，Vue3对应@storybook/vue3
• 检查.storybook/main.js中的stories字段是否包含你的组件目录，示例配置：

export default {
  stories: [
    '../components/**/*.stories.@(js|jsx|ts|tsx)'
  ]
}

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