子工程

main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import singleSpaVue from "single-spa-vue";
 
Vue.config.productionTip = false;
const vueLifecycles = singleSpaVue({
  Vue,
  appOptions: {
    render(h) {
      return h(App);
    },
    router,
  },
});
if ("单独开发") {
  new Vue({
    router,
    render: (h) => h(App),
  }).$mount("#app");
}
console.log("vueLifecycles", vueLifecycles);
 
export const bootstrap = vueLifecycles.bootstrap;
export const mount = vueLifecycles.mount;
export const unmount = vueLifecycles.unmount;
 

vue.config.js, webpack配置文件

const StatsPlugin = require("stats-webpack-plugin");
const pkg = require("./package.json");
 
// 线上build部署接入 yarn build
let publicPath = `/subs/${pkg.microName}`;
// 本地dev接入 yarn single
if (process.env.NODE_ENV === "development") {
  publicPath = `/`;
}
 
module.exports = {
  outputDir: `dist/subs/${pkg.microName}`,
  publicPath: publicPath, // 要部署的公共地址
  lintOnSave: false,
  devServer: {
    port: 8889, // 本地调试配置端口
    headers: {
      "Access-Control-Allow-Origin": "*", // 用于本地调试时允许跨域请求文件
    },
  },
  configureWebpack: {
    output: {
      filename: `${pkg.microName}.${Date.now()}.[hash:6].js`, // 入口文件 输出文件名
      chunkFilename: `${pkg.microName}.chunk.[chunkhash:8].js`, // 非入口文件
      library: pkg.microName, // 输出的承接变量名
      libraryTarget: "umd",
    },
    plugins: [
      // mainfest文件，用于展示打包信息 按需加载js
      new StatsPlugin("manifest.json", {
        chunkModules: false,
        entrypoints: true,
        source: false,
        chunks: false,
        modules: false,
        assets: false,
        children: false,
        exclude: [/node_modules/],
      }),
    ],
    optimization: {
      splitChunks: false,
    },
  },
};