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

Posted 2023-02-16

【中文标题】带有 vue 2.16.12 的 webpack 模块联合和 single-spa-vue 不起作用

【英文标题】：webpack module federation and single-spa-vue with vue 2.16.12 not working

【发布时间】：2021-07-19 21:58:52

【问题描述】：

我正在使用 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

有人可以帮我吗？

谢谢！

【参考方案1】：

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