在 Vue Storefront Next 项目中使用 @nuxtjs/storybook 时，Vue 组件不呈现 - 可能是 Typescript 问题？

Question

我正在尝试使用 @nuxtjs/storybook inside a Vue Storefront Next (https://docs.vuestorefront.io/v2/general/key-concepts.html) 项目。

我可以让 Storybook 打开并显示故事，但故事中的组件未呈现。例如，如果我尝试使用 https://storybook.nuxtjs.org/usage 中的示例，那么我会在 devtools（Vue 组件的名称）中看到一个 <link> 元素，而不是呈现的 <a> 元素（内容Vue 组件):

然后我转而尝试使用另一个简单的组件：

但这也行不通，您可以在此处查看示例：https://pedantic-chandrasekhar-a83cfc.netlify.app/?path=/story/logo--logo（我无法让 Storybook 在 Codesandbox 上运行）。

Vue Storefront Next 基于 Nuxt，但我必须进行一些更改才能打开 Storybook：

更新 nuxt.config.js 中的 build 部分：

babel: {
      presets({ envName }) {
        return [
          [
            '@nuxt/babel-preset-app',
            {
              corejs: { version: 3 }
            }
          ]
        ]
      },
      ignore: [/[\/\]core-js/, /@babel[\/\]runtime/],
    },

安装 @babel/runtime-corejs3、core-js 3 和 ts-node

ts-node 是必要的，因为 Vue Storefront Next 为部分项目的开发提供了一个 tsconfig.json 文件，这使得 @nuxtjs/storybook 模块认为该项目是一个 Typescript 项目（ https://github.com/nuxt-community/storybook/blob/e5b3698482873d7129cd763a0422b8c3151cee0b/src/index.ts#L67-L76)，但 Vue Storefront 项目不使用 @nuxt/typescript-runtime - 我想知道这是否是问题的一部分？

您可以在Codesandbox上看到package.json内容：https://codesandbox.io/s/admiring-pine-2byq7?file=/package.json

任何有关如何解决此问题的线索都将不胜感激，谢谢！我在这上面度过了一天中最美好的时光，但不幸的是，我对 Storybook 或 Nuxt 的了解还不够多，无法自行调试 :(

Answer 1

事实证明，@nuxtjs/storybook 模块似乎依赖于在项目的 nuxt.config.js 文件中设置的 components: true。

@nuxtjs/storybook 文档中的任何地方都没有提到这一点，但我提出了一个 Github 问题来指出这一点，如果维护者同意，我将针对文档提出 PR。

您可以在这个 Github 线程中看到我发现这个问题背后的思考过程：https://github.com/nuxt-community/storybook/issues/233#issuecomment-785027558

在 Vue Storefront Next 项目中使用 @nuxtjs/storybook 时，Vue 组件不呈现 - 可能是 Typescript 问题？

Vue components not rendering when @nuxtjs/storybook is used in a Vue Storefront Next project - possibly a Typescript issue?

vue.js

nuxt.js

storybook