按照老师课程的改造vue3的vue.config.js

const path = require('path');

const packageName = 'vue3'

function resolve(dir) {
  return path.join(__dirname, dir);
}

const port = 9005;

module.exports = {
  outputDir: 'dist',
  assetsDir: 'static',
  filenameHashing: true,
  publicPath: 'http://localhost:9005',
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    hot: true,
    disableHostCheck: true,
    port,
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
  // 自定义webpack配置
  configureWebpack: {
    resolve: {
      alias: {
        '@': resolve('src'),
      },
    },
    output: {
      // 把子应用打包成 umd 库格式
      filename: 'vue3.js',
      library: `${packageName}-[name]`,//可以在window找到子应用的打包module
      libraryTarget: 'umd',
      jsonpFunction: `webpackJsonp_${packageName}`,
    },
  },
};

主应用加载成功，一加载vue3子应用就报Uncaught (in promise) TypeError: Cannot read properties of null (reading 'insertBefore')。

vue2子应用也加载报错。Uncaught TypeError: application 'vue2' died in status NOT_MOUNTED: Cannot read properties of undefined (reading 'on')

vue2的vue.config.js

const path = require('path');

function resolve(dir) {
  return path.join(__dirname, dir);
}

const packageName = 'vue2';
const port = 9004;

module.exports = {
  outputDir: 'dist', // 打包的目录
  assetsDir: 'static', // 打包的静态资源
  filenameHashing: true, // 打包出来的文件，会带有hash信息
  publicPath: 'http://localhost:9004',
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    hot: false,
    disableHostCheck: true,
    port,
    headers: {
      'Access-Control-Allow-Origin': '*', // 本地服务的跨域内容，主应用访问
    },
  },
  // 自定义webpack配置
  configureWebpack: {
    resolve: {
      alias: {
        '@': resolve('src'),
      },
    },
    output: {
      // 把子应用打包成 umd 库格式 commonjs 浏览器，node环境
      // library: `${packageName}`,
      library: `${packageName}`,//可以在window找到子应用的打包module
      libraryTarget: 'umd',
      jsonpFunction: `webpackJsonp_${packageName}`,

      // library: 'vue2'//控制台windows.vue2
    },
  },
};