如何修改Storybook的基础URL，配置自定义访问路径？

要把Storybook的默认访问地址从http://localhost:6006/改成http://localhost:6006/storybook/，有两种常用方法：

方法一：修改启动命令参数 #

直接在package.json的scripts字段里，给storybook启动命令添加--base-path参数：

如果是Storybook 7+版本（使用storybook dev命令）：

{
  "scripts": {
    "storybook": "storybook dev -p 6006 --base-path /storybook"
  }
}

如果是旧版本（使用start-storybook命令）：

{
  "scripts": {
    "storybook": "start-storybook -p 6006 --base-path /storybook"
  }
}

修改后执行npm run storybook，就会自动打开http://localhost:6006/storybook/。

方法二：通过Storybook配置文件设置 #

在项目根目录的.storybook/main.js（或.storybook/main.ts）中，添加basePath配置项：

// .storybook/main.js
module.exports = {
  // 其他已有配置（比如stories、addons等）
  basePath: '/storybook',
};

这种方法会同时作用于开发模式和构建静态文件的场景（执行build-storybook时，生成的静态资源也会基于/storybook路径）。

注意：两种方法任选其一即可，无需重复设置。

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