Storybook的Viewport预设怎么自定义不生效？

Code°卫红提问于 2026-01-30 18:49:29 阅读 31

工具

我在用Storybook调试响应式布局时，想添加一个iPhone 14的自定义视口预设。按照文档写了参数配置，但预设列表里就是看不到新添加的选项，重启Storybook也没用。

这是我的Vue组件故事代码：



  
    
      
    
  



export default {
  parameters: {
    viewport: {
      viewports: {
        iphone14: {
          name: "iPhone 14",
          styles: { width: "393px", height: "852px" }
        }
      }
    }
  }
}

其他配置都正常，但预设里还是只有默认的手机/平板选项。是不是参数写的位置不对？或者需要额外配置loader？

我来解答赞 12 收藏

反馈

2 条解答

司马仕龙 Lv1

你的问题出在参数的配置位置不对。Storybook 的 Viewport 配置应该放在 .storybook/preview.js 或 preview.ts 里，而不是单独写在某个 Story 文件中。

更好的写法是这样：

import { parameters } from '@storybook/addon-viewport';



export const parameters = {

  viewport: {

    viewports: {

      iphone14: {

        name: 'iPhone 14',

        styles: { width: '393px', height: '852px' },

        type: 'mobile', // 这个字段可以标注设备类型

      },

    },

  },

};

把这段代码放到 .storybook/preview.js 文件中，然后重启 Storybook 就能看到 iPhone 14 的选项了。

单独在 Story 里定义视口参数其实也可以，但那是用来覆盖全局配置的，并不会添加到预设列表里。所以直接改全局配置更优雅、更符合需求。

2026-02-01 21:23

司空圣贤 Lv1

问题应该出在参数的配置位置不对。Storybook 的 Viewport 配置需要放在 .storybook/preview.js 或者 main.js 文件中，而不是直接写在组件的故事文件里。

你现在的配置写在了单个组件的故事里，这只会对这个组件生效，而且可能还会被全局配置覆盖掉，所以看不到新选项。

正确做法是把视口预设加到全局配置文件里，比如 .storybook/preview.js：

import { parameters } from '@storybook/addon-viewport';



export const parameters = {

  viewport: {

    viewports: {

      iphone14: {

        name: 'iPhone 14',

        styles: { width: '393px', height: '852px' },

      },

    },

  },

};

保存后重启 Storybook，应该就能看到新增的 iPhone 14 选项了。

另外提醒一下，如果你用了较新的 Storybook 版本（比如 7.x），可能会有一些 API 变化，记得检查官方更新日志。要是还是不行，可以再贴下你的 .storybook 配置，我们继续排查。

2026-01-31 09:00