如何让cypress-cucumber-preprocessor适配Quasar2(Vue3)+Vite环境

我已搭建基于Quasar 2（Vue 3）、Vite和Cypress 12.9.0的新项目，未使用Typescript。Quasar官方的@quasar/testing-e2e-cypress@beta默认测试文件home.cy.js可正常运行。

现在我希望添加@badeball/cypress-cucumber-preprocessor插件以启用Cucumber BDD功能，但该插件官方文档仅提供了其他构建平台的配置示例，没有Vite相关的参考。我可能对所需配置存在误解，现附上esbuild版本的cypress.config.js示例（无法直接使用，仅作参考起点），需要将其修改为适配Vite的版本：

const { defineConfig } = require('cypress');
const { injectQuasarDevServerConfig } = require('@quasar/quasar-app-extension-testing-e2e-cypress/cct-dev-server');
const { addCucumberPreprocessorPlugin } = require('@badeball/cypress-cucumber-preprocessor')

// FIX: 这是esbuild版本，不是Vite
const { createBundler } = require('@bahmutov/cypress-esbuild-preprocessor');
const { createEsbuildPlugin } = require('@badeball/cypress-cucumber-preprocessor/esbuild');


module.exports = defineConfig({
  fixturesFolder: 'test/cypress/fixtures',
  screenshotsFolder: 'test/cypress/screenshots',
  videosFolder: 'test/cypress/videos',
  video: true,

  e2e: {
    async setupNodeEvents (on, config) {
      // 这是预处理器生成JSON报告等功能的必要配置
      await addCucumberPreprocessorPlugin(on, config);

      on(
        "file:preprocessor",

        // FIX: 这是esbuild版本，不是Vite
        createBundler({
          plugins: [createEsbuildPlugin(config)],
        })
      );

      return config;
    },
    baseUrl: 'http://localhost:9000/',
    supportFile: 'test/cypress/support/e2e.js',
    specPattern: 'test/cypress/e2e/**/*.feature'
  }
});

请问有没有人成功在上述Quasar Vite环境中完成该插件的配置？感谢！

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