带有 vue 2.16.12 的 webpack 模块联合和 single-spa-vue 不起作用

Question

我正在使用 single-spa-vue 和 Vue 2.6.12 开发一个微前端，但它根本不工作。

我正在使用 webpack 模块联合插件。

这是我的切入点。

src/app.ts

import singleSpaVue from 'single-spa-vue';
import Vue from 'vue';

import Main from './Main.vue';
import router from './router';

const lifecycles = singleSpaVue({
  Vue,
  appOptions: {
    render(h: any) {
      return h(Main as any);
    },
    router,
  } as any,
});

export const bootstrap = lifecycles.bootstrap;
export const mount = lifecycles.mount;
export const unmount = lifecycles.unmount;

这是我的 webpack.config.js 文件

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin')
const StandaloneSingleSpaPlugin = require('standalone-single-spa-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader')

const path = require('path');
const outputPath = path.resolve(__dirname, 'dist');

module.exports = {
  entry: './src/index',
  cache: false,

  mode: 'development',
  devtool: 'source-map',

  optimization: {
    minimize: false,
  },

  output: {
    publicPath: 'http://localhost:3002/',
  },

  resolve: {
    extensions: ['.js', '.ts', '.json', '.vue'],
    alias: {
      '~' : path.resolve(__dirname, 'node_modules')
    }
  },

  devServer: {
    headers: {
      "Access-Control-Allow-Origin": "*",
    },
    contentBase: outputPath,
    disableHostCheck: true,
    historyApiFallback: true,
  },

  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          'vue-style-loader',
          'style-loader',
          'css-loader',
          'sass-loader',
        ],
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
      },
      {
        test: /\.ts?$/,
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/],
        },
        exclude: /node_modules/,
      },
    ],
  },

  plugins: [
    new HtmlWebpackPlugin(),
    new StandaloneSingleSpaPlugin({
      // required
      appOrParcelName: "body",
      // optional - strongly encouraged for single-spa applications
      activeWhen: ['/'],
      // optional - defaults to true - turns on or off import-map-overrides.
      importMapOverrides: true,
    }),
    new VueLoaderPlugin(),
    new ModuleFederationPlugin({
      name: 'content',
      library: { type: 'var', name: 'content' },
      filename: 'remoteEntry.js',
      remotes: {
        content: 'content'
      },
      exposes: {
        Content: './src/app',
      },
    }),
  ],
}

这是我的 index.ts 文件

src/index.ts

import { start, registerApplication } from 'single-spa'

registerApplication({
  name: 'content',
  app: () => import('content/Content' as any),
  activeWhen: '/',
},)

start()

当我运行 yarn start 并转到 localhost:3002 这是错误。

error image

有人可以帮我吗？

谢谢！

Answer 1

嗯，可能是你把主机容器和远程容器的关系混在一起了，我看到你的ModuleFederationPlugin 配置，特殊的remotes 和name 是一样的，看起来不正确。