webpack模块联合会和单水疗中心，vue 2.16.12不工作

Question

我正在开发一个带有单水疗中心和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()

当我运行纱线时，启动，然后转到，这就是错误。

误差图像

有人能帮我吗？

谢谢!

Answer 1

嗯，可能是u混合了主机容器和远程容器的关系，我看到了您的ModuleFederationPlugin配置，特殊的remotes和name是一样的，它看上去好像不正确。