Storybook从v6迁移至v7后publicPath配置失效求助

问题背景 #

之前在Storybook v6中，我们通过修改webpackFinal和managerWebpack的output配置来设置生产环境的publicPath，但升级到v7后该配置完全失效，publicPath为空，且项目基于纯React，Next.js相关方案不适用。

解决方案 #

Storybook v7重构了配置体系，不再需要通过修改webpack配置来设置publicPath，而是提供了专门的顶层配置项：

• 主应用构建的publicPath：直接在build选项下配置publicPath，该配置仅对生产构建生效
• 管理界面（Manager）的publicPath：通过manager选项下的publicPath单独配置

完整配置示例 #

const path = require('path');

module.exports = {
  typescript: {
    check: true,
  },

  stories: ['../src/**/*.stories.@(ts|md)x', '../src/**/*.docs.@(ts|md)x'],

  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-docs',
    'storybook-css-modules-preset',
    '@storybook/addon-controls',
  ],
  
  // 配置路径别名，替代原webpackFinal中的别名逻辑
  resolve: {
    alias: {
      '~': path.resolve(__dirname, '../src/'),
    },
  },

  // 主应用生产构建的publicPath配置
  build: {
    publicPath: '/custom-path/',
  },

  // 管理界面的publicPath配置
  manager: {
    publicPath: '/custom-path/',
  },

  framework: {
    name: '@storybook/react-webpack5',
    options: {},
  },

  docs: {
    autodocs: true,
  },
};

关键变化说明 #

• 移除了webpackFinal中修改config.output.publicPath的代码，改用顶层build.publicPath替代，符合v7的配置规范
• 移除了managerWebpack配置，改用manager.publicPath单独设置管理界面的资源路径
• 路径别名从webpackFinal迁移到顶层resolve.alias，简化配置结构

验证方式 #

执行生产构建命令：

npm run build-storybook

构建完成后，检查生成的storybook-static目录下的index.html和管理界面的资源引用路径，确认是否已使用配置的/custom-path/作为前缀。

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