在Vite + SvelteKit中重写/__open-in-editor路由的技术问询

要复用/__open-in-editor路由并添加自动关闭标签页的逻辑，核心是调整Vite中间件的执行顺序，让自定义逻辑配合默认中间件运行——毕竟Vite的launchEditorMiddleware会优先于SvelteKit的路由处理请求，直接在SvelteKit里建同名路由是无效的。下面是两种可行方案：

方案一：插入自定义中间件到默认中间件之前 #

通过Vite的configureServer钩子，找到默认的launchEditorMiddleware，把自定义逻辑插在它前面，既保留默认打开编辑器的功能，又能追加自定义操作：

// vite.config.ts
import { sveltekit } from '@sveltejs/kit/vite';
import type { ViteDevServer } from 'vite';

export default {
  plugins: [sveltekit()],
  server: {
    configureServer(server: ViteDevServer) {
      // 定位Vite自带的launchEditorMiddleware在中间件栈中的位置
      const launchEditorIndex = server.middlewares.stack.findIndex(
        (middleware) => middleware.handle.name === 'launchEditorMiddleware'
      );

      // 在默认中间件前插入自定义逻辑
      if (launchEditorIndex !== -1) {
        server.middlewares.stack.splice(launchEditorIndex, 0, {
          route: '/__open-in-editor',
          handle: async (req, res, next) => {
            if (req.url?.startsWith('/__open-in-editor')) {
              // 先执行Vite的默认逻辑：打开编辑器
              await next();
              // 追加关闭标签页的响应
              res.setHeader('Content-Type', 'text/html');
              res.end(`
                <script>
                  // 部分浏览器要求用户交互后才能关闭标签，加个延迟兼容
                  setTimeout(() => window.close(), 300);
                </script>
              `);
              return;
            }
            next();
          }
        });
      }
    }
  }
};

方案二：直接调用默认中间件并追加逻辑 #

如果不想查找中间件索引，也可以直接引入Vite的launchEditorMiddleware，手动执行默认逻辑后再添加自定义操作：

// vite.config.ts
import { sveltekit } from '@sveltejs/kit/vite';
import type { ViteDevServer } from 'vite';
import { launchEditorMiddleware } from 'vite';

export default {
  plugins: [sveltekit()],
  server: {
    configureServer(server: ViteDevServer) {
      // 给/__open-in-editor路由绑定自定义中间件
      server.middlewares.use('/__open-in-editor', async (req, res) => {
        // 先执行默认的打开编辑器逻辑
        await launchEditorMiddleware(req, res, () => {});
        // 返回关闭标签页的内容
        res.setHeader('Content-Type', 'text/html');
        res.end(`
          <script>
            setTimeout(() => window.close(), 300);
          </script>
        `);
      });
    }
  }
};

为什么直接建SvelteKit路由无效？ #

Vite的开发服务器中间件会在SvelteKit的路由处理流程之前运行，当请求/__open-in-editor时，Vite的launchEditorMiddleware会先接住请求并处理，不会把请求传递到SvelteKit的路由系统，所以你创建的同名路由永远不会被触发。

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