如何在Storybook 8.2.9版本中修改Favicon

针对你遇到的问题，这里提供几个经过验证的解决方法：

方法一：通过manager.ts修改（推荐） #

确保正确导入favicon资源并替换原有图标：

// .storybook/manager.ts
import favicon from '../public/favicon.png'; // 调整为你实际的favicon文件路径

document.addEventListener('DOMContentLoaded', () => {
  // 查找现有图标标签，没有则创建新标签
  const faviconLink = document.querySelector('link[rel="shortcut icon"]') || document.createElement('link');
  faviconLink.rel = 'shortcut icon';
  faviconLink.href = favicon;
  document.head.appendChild(faviconLink);
});

注意：导入路径要根据你的.storybook目录位置调整，比如如果.storybook在项目根目录，../public就是指向项目根下的public文件夹。

方法二：创建manager-head.html文件 #

直接在.storybook目录下新建manager-head.html文件，添加图标标签：

<!-- .storybook/manager-head.html -->
<link rel="shortcut icon" href="/public/favicon.png">

路径可以是相对项目根目录的绝对路径，或者根据静态资源的实际访问路径调整。

方法三：通过main.ts修改Webpack配置 #

修改manager的Webpack配置，更新已有的HtmlWebpackPlugin实例：

// .storybook/main.ts
import type { StorybookConfig } from '@storybook/react-vite'; // 替换为你使用的框架类型
import HtmlWebpackPlugin from 'html-webpack-plugin';
import path from 'path';

const config: StorybookConfig = {
  // 你的其他Storybook配置...
  managerWebpack: async (webpackConfig) => {
    // 找到并修改已有的HtmlWebpackPlugin
    const htmlPlugin = webpackConfig.plugins?.find(
      plugin => plugin instanceof HtmlWebpackPlugin
    ) as HtmlWebpackPlugin;

    if (htmlPlugin) {
      htmlPlugin.options.favicon = path.resolve(__dirname, '../public/favicon.png');
    }

    return webpackConfig;
  },
};

export default config;

内容的提问来源于stack exchange，提问作者jt25