在 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 Storefront Next 项目中使用 @nuxtjs/storybook 时，Vue 组件未呈现 - 可能是 Typescript 问题？
【发布时间】：2021-05-26 04:00:21
【问题描述】：

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

我可以打开 Storybook 并显示故事，但故事中的组件未呈现。例如，如果我尝试使用 https://storybook.nuxtjs.org/usage 中的示例，那么我会在 devtools 中看到 <link> 元素（Vue 组件的名称），而不是呈现的 <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店面项目不使用@nuxt/typescript-runtime - 我想知道这是否是问题的一部分？

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

任何有关如何解决此问题的线索将非常感谢，谢谢！我花了一天中最好的时间在这上面，但我对 Storybook 或 Nuxt 的了解还不够，无法自己调试它，不幸的是:(

【问题讨论】：

标签： vue.js nuxt.js storybook

【解决方案1】：

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

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

你可以在这个 Github 帖子中看到我是如何发现这个问题的思考过程：https://github.com/nuxt-community/storybook/issues/233#issuecomment-785027558

【讨论】：