我有一个Single-SPA项目，其中有一个根应用程序（端口9000）和一个Vite-React应用程序（端口9002）。但是，我无法通过根目录（localhost：9000）获取应用程序。

Root应用

index.ejs：

<script type="systemjs-importmap">
    {
      "imports": {
        "single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.9.0/lib/system/single-spa.min.js",
        "react": "https://unpkg.com/react@18/umd/react.production.min.js",
        "react-dom": "https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
      }
    }
  </script>
  <link rel="preload" href="https://cdn.jsdelivr.net/npm/single-spa@5.9.0/lib/system/single-spa.min.js" as="script">

  <% if (isLocal) { %>
  <script type="systemjs-importmap">
    {
      "imports": {
        "@org/root-config": "//localhost:9000/pi-root-config.js"

      }
    }
  </script>
  <% } %>

字符串

root-config.js

import { registerApplication, start } from "single-spa";

registerApplication({
  name: "@org/react-test",
  app: () => 
    import(
      /* webpackIgnore: true */
      "http://localhost:9002/src/main.jsx"
    ),
  activeWhen: ["/"]
});

start({
  urlRerouteOnly: true,
});

型

webpack.config.js

const { merge } = require("webpack-merge");
const singleSpaDefaults = require("webpack-config-single-spa");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = (webpackConfigEnv, argv) => {
  const orgName = "org";
  const defaultConfig = singleSpaDefaults({
    orgName,
    projectName: "root-config",
    webpackConfigEnv,
    argv,
    disableHtmlGeneration: true,
  });

  return merge(defaultConfig, {
    // modify the webpack config however you'd like to by adding to this object
    plugins: [
      new HtmlWebpackPlugin({
        inject: false,
        template: "src/index.ejs",
        templateParameters: {
          isLocal: webpackConfigEnv && webpackConfigEnv.isLocal,
          orgName,
        },
      }),
    ],
    output: {
      publicPath: 'http://localhost:9000/'
    },
    resolve: {
      extensions: ['.jsx', '.js', '.json', '.png', '.svg']
    },
    module: {
      rules: [
        {
          test: /\.css$/i,
          use: ["style-loader", "css-loader"],
        },
      ],
    },
  });
};

型

Vite-React应用

main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import singleSpaReact from "single-spa-react";
import App from './App.jsx'
import './index.css'

const lifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: App,
  errorBoundary(err, info, props) {
    return <div>This renders when a error occurs</div>;
  },
});

export const { bootstrap, mount, unmount } = lifecycles;

型

vite.config.js

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  rollupOptions: {
    input: 'src/main.jsx',
    format: 'system',
    preserveEntrySignatures: true,
  },
  base: "http://localhost:9002",
  plugins: [react()],
  server: {
    origin: "http://localhost:9002",
  },
})

型
我做了一些研究，我已经删除了react-refresh从.eslintrc.cjs，但它不工作。有人知道如何使用Single-SPA + Vite + React构建一个结构吗？