SvelteKit主应用内实现子应用的方法及路由方式咨询

替代实现思路 #

除了你提到的两种方案，还有以下更灵活的选型：

• Monorepo拆分：借助pnpm/npm Workspaces将主应用与发票子应用拆分为仓库内的两个独立package，各自维护源码、依赖与配置。主应用仅负责认证逻辑与路由入口，子应用独立开发、构建，通过依赖引用嵌入主应用。
• Web Component封装：将发票子应用打包为独立的Web Component，主应用在认证通过后，于/invoice路由下渲染该组件，子应用内部自行处理路由、样式与资源，实现完全隔离。

子应用路由接入方案（除Routify外） #

1. SvelteKit官方路由挂载集成 #

利用SvelteKit原生路由系统实现子应用接入：

• 子应用单独开发为完整的SvelteKit项目，构建后生成dist产物；
• 主应用在src/routes/invoice/+layout.svelte中作为子应用入口，通过动态导入（import('$lib/invoice-app/entry.js')）加载子应用根组件，在+page.svelte中渲染；
• 主应用的+layout.server.js加入认证拦截逻辑，确保未登录用户无法访问/invoice前缀路由；
• 通过SvelteKit的handle钩子，将所有/invoice/*请求转发到子应用的构建产物目录。

2. Vite多入口配置 #

修改主应用vite.config.js，配置双入口实现代码隔离：

export default {
  build: {
    rollupOptions: {
      input: {
        main: './src/main.js',
        invoice: './src/invoice/main.js'
      }
    }
  },
  resolve: {
    alias: {
      '$invoice': './src/invoice'
    }
  }
}

• 主应用与子应用分别拥有独立的入口文件，子应用的组件、样式、资源完全独立存放于src/invoice目录；
• 主应用路由中，/invoice页面通过动态组件加载子应用根组件，通过共享的Svelte Store传递认证状态；
• 子应用样式可通过Vite的CSS模块配置实现作用域隔离。

3. 路由前缀转发+独立构建 #

将子应用构建为静态资源包，部署在主应用static/invoice目录下：

• 主应用handle钩子中匹配/invoice/*请求，直接返回子应用对应静态文件；
• 主应用/invoice入口页面仅做认证校验，校验通过后重定向到子应用入口（如/invoice/index.html），子应用自行处理内部路由。

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