Storybook中如何自定义Viewport预设但无法生效？

这个问题我也碰到过，Storybook的viewport插件有时候配置确实有点坑。你现在的写法问题出在配置的位置上。

正确的做法是把viewport相关的配置放到.storybook/preview.js文件里，而不是分开写在manager.js。你的代码本身没错，但需要调整一下结构：

import { deviceViewports } from '@storybook/addon-essentials';



export const parameters = {

  viewport: {

    viewports: {

      ...deviceViewports,

      iPhoneSE: {

        name: 'iPhone SE',

        styles: { width: '375px', height: '667px' },

      },

    },

  },

};

注意这里用了deviceViewports，这是为了保留默认设备列表的同时添加自定义设备。如果你直接覆盖viewports，原来的设备就会消失。

另外确保你已经安装了@storybook/addon-essentials或者单独安装了@storybook/addon-viewport，不然这个功能可能根本不会加载。

最后重启Storybook试试，一般这样就能看到了。如果还是不行，检查下控制台或者Storybook的日志输出，说不定有隐藏的错误提示。

这个问题其实挺常见的，很多同学在配置Storybook的Viewport插件时都会踩类似的坑。咱们一步步来排查和解决。

### 第一步：确认插件是否正确加载
首先，你得确保 @storybook/addon-viewport 插件已经在你的项目里正确安装了。如果没装，先运行：

npm install @storybook/addon-viewport --save-dev

接着，检查你的 .storybook/main.js 文件，看看有没有正确引入这个插件。应该像这样：

module.exports = {

  addons: [

    '@storybook/addon-viewport', // 确保这里包含这个插件

    // 其他插件...

  ],

};

如果没有这一行，加上它，然后重启Storybook试试。

---

### 第二步：检查预设配置的位置
你提到把自定义的 viewport 配置写在了 preview.js 里，这种方式其实是可以的，但有时候可能会被其他地方的配置覆盖掉。我们来确认一下具体位置。

#### 如果用的是 preview.js
你的代码写法是对的，不过需要确保没有其他地方重复定义了 parameters.viewport.viewports，或者某些地方清空了配置。

另外，记得重启Storybook服务！有时候热更新可能不会生效，尤其是涉及到全局配置的时候。

如果你还是看不到自定义选项，可以尝试另一种方式——直接在 .storybook/preview.js 里通过 addParameters 来设置：

import { addParameters } from '@storybook/react'; // 根据你的框架调整



addParameters({

  viewport: {

    viewports: {

      iPhoneSE: {

        name: 'iPhone SE',

        styles: { width: '375px', height: '667px' },

        type: 'mobile', // 这个字段是可选的，用来分类设备类型

      },

      iPadPro: {

        name: 'iPad Pro',

        styles: { width: '1024px', height: '1366px' },

        type: 'tablet',

      },

      // 添加更多自定义设备...

    },

  },

});

---

### 第三步：确认控制面板是否启用了 Viewport
有时候问题出在控制面板本身。你需要确保 Storybook 的控制面板（Controls）已经正确启用了 Viewport 功能。

在 .storybook/preview.js 中添加以下代码，确保 Viewport 被正确注册到工具栏中：

export const parameters = {

  viewport: {

    defaultViewport: 'iPhoneSE', // 设置一个默认的预设

    viewports: { /* 你的自定义预设 */ },

  },

};

如果仍然无效，可能是 Storybook 版本的问题。试着升级到最新版本，命令如下：

npm install @storybook/react@latest --save-dev

---

### 第四步：调试和验证
最后，你可以通过打开浏览器控制台，输入以下代码手动检查你的配置是否生效：

console.log(storybookApi.getCurrentParameters().viewport.viewports);

如果能看到你定义的 iPhoneSE 和其他设备，说明配置已经被正确加载，只是界面没显示出来。这种情况下可能是插件内部有冲突，可以尝试清理缓存或重新安装依赖。

---

### 总结
按照上面的步骤走一遍，基本上问题都能解决了。如果还是不行，可能是你的 Storybook 版本过旧或者插件本身有问题。实在没办法的话，建议直接升级到最新版 Storybook，省心！

对了，别忘了每次修改完配置都要重启 Storybook 哦，不然有时候改动不会生效。开发这东西嘛，总是有点小折腾，但也挺有趣的。😄