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

Posted

技术标签:

【中文标题】在 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? 【发布时间】: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://codesandbox.io/s/admiring-pine-2byq7?file=/components/Logo.vue https://codesandbox.io/s/admiring-pine-2byq7?file=/components/Logo.stories.js

但这也不起作用,您可以在此处查看一个示例: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-corejs3core-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 的了解还不够,无法自己调试它,不幸的是:(

【问题讨论】:

【参考方案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-next-admin的Vue3+TypeScript前端项目中,为了使用方便全局挂载的对象接口

Vue3与Vue.draggable-next拖拽问题

Vue-draggable-next:增加空列表的检测范围

vue3+vite+vant搭建项目

如何使 BeforeRouteEnter 中的 next(false) 阻止 Vue-Router 导航到路由?

Vue 3 + vue-i18n-next:我做错了啥?