Svelte/Kit主应用中通过路径访问Storybook的实现方案

核心结论 #

可以在Storybook开发环境下实现通过主应用路径访问，无需依赖编译后的构建包。关键是同时配置Storybook的基础路径和Vite的反向代理规则，覆盖所有Storybook相关请求。

步骤1：配置Storybook的基础路径 #

修改.storybook/main.js，设置Storybook的base路径为/pattern-library/，确保它生成的资源路径都带上这个前缀，适配代理后的访问路径：

// .storybook/main.js
export default {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  framework: '@storybook/sveltekit',
  core: {
    builder: '@storybook/builder-vite',
  },
  viteFinal: async (config) => {
    return {
      ...config,
      base: '/pattern-library/', // 指定Storybook的基础路径
    };
  },
};

步骤2：修正Vite代理配置 #

更新vite.config.ts，除了代理/pattern-library路径，还要代理所有/sb-*开头的请求（Storybook的静态资源、插件资源都用这个前缀），避免SvelteKit路由误处理这些请求：

// vite.config.ts
export default defineConfig({
  plugins: [sveltekit()],
  server: {
    host: 'mydomain.local',
    port: 80,
    strictPort: true,
    proxy: {
      // 代理主路径到Storybook开发服务器
      '/pattern-library': {
        target: 'http://localhost:8081',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/pattern-library/, ''),
      },
      // 代理Storybook的静态资源和插件资源
      '/sb-': {
        target: 'http://localhost:8081',
        changeOrigin: true,
      },
    },
  },
});

为什么之前的配置失败？ #

• 代理方案：未处理/sb-*前缀的请求，这些请求被SvelteKit的路由系统接管，导致404错误。
• 重定向方案：跳转路径未加协议前缀，浏览器将localhost:8081解析为主应用下的子路径，而非独立地址。若想用重定向，正确代码应为：

  // routes/pattern-library/+page.server.js
  import { redirect } from '@sveltejs/kit';
  
  export function load() {
      throw redirect(307, 'http://localhost:8081');
  }
  

  但重定向会暴露Storybook的真实端口，不如反向代理符合需求。

额外说明 #

1. 启动顺序：先启动Storybook（npm run storybook:dev），再启动SvelteKit主应用，确保代理目标服务已运行。
2. 验证：访问mydomain.local/pattern-library即可直接进入开发环境的Storybook，地址栏保持主应用域名路径。

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