Storybook技术问题：静态构建资源无法加载

嘿，我之前也踩过Storybook构建后资源加载失败的坑，整理了几个最常见的排查方向和解决方案，你可以一步步试下：

1. 检查构建命令与基础配置 #

• 确保你用的是官方推荐的构建命令：npm run build-storybook（或yarn build-storybook），这个命令会默认把产物输出到storybook-static目录下
• 打开.storybook/main.js（或main.ts），检查staticDirs配置是否正确。如果你的项目有自定义静态资源目录（比如public），需要在这里声明：

  module.exports = {
    staticDirs: ['../public'], // 这里要对应你项目的静态资源路径
    // 其他配置...
  };
  

2. 修复资源路径问题 #

这是最常见的触发原因！如果你的Storybook要部署在子路径下（比如https://your-domain.com/storybook/），必须配置baseUrl：

• 在.storybook/main.js里添加base配置：

  module.exports = {
    base: '/storybook/', // 对应你的部署子路径
    // 其他配置...
  };
  

• 重新执行构建命令，再用静态服务器测试加载

3. 用正确方式启动静态资源 #

别直接双击index.html打开（浏览器会用file://协议加载，容易触发跨域或路径解析问题），一定要用静态服务器运行构建产物：

• 用Node.js的serve工具：先安装npm install -g serve，然后执行serve storybook-static
• 或者用Python：python -m http.server --directory storybook-static（Python3版本），访问http://localhost:8000即可

4. 清理缓存重新构建 #

有时候旧缓存会导致奇怪的资源加载异常：

• 手动删除storybook-static目录，然后重新执行npm run build-storybook
• 也可以清理Node模块缓存：npm cache clean --force，重新安装依赖后再构建

5. 检查资源引用路径 #

打开storybook-static/index.html，查看里面的CSS、JS文件的src路径，确认是否和实际文件位置匹配。如果路径不对，基本就是base或staticDirs的配置出了问题。

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