微前端（四）go-app-sub的实现

子项目配置
配置子项目的main.ts

// 注意哦，这一行引入不要忘记了，要加载最上面
import './public-path';

import $ from "jquery";
import Vue from "vue";

import App from "./App.vue";
import routes from "./router";
import store from "./store";
// @ts-ignore
import vcolorpicker from 'vcolorpicker'
Vue.use(vcolorpicker);

// 引入datav
import dataV from '@jiaminghi/data-view';
Vue.use(dataV)
//引入goingUI控件
import "@/go-pc-ui/styles/index.less";
// @ts-ignore
import goingUi from '@/go-pc-ui/index.js';
Vue.use(goingUi);

//引入全局样式信息
import '@/assets/less/index.less';

import ViewUI from 'view-design';
import 'view-design/dist/styles/iview.css';
import comUtils, { loadSystem, validateSession } from "@/utils/comUtils";
import EventBus from "@/utils/EventBus";

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'


Vue.use(Viewer);
Viewer.setDefaults({
  // @ts-ignore
  Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true, 'toolbar': true, 'tooltip': true, 'movable': true, 'zoomable': true, 'rotatable': true, 'scalable': true, 'transition': true, 'fullscreen': true, 'keyboard': true, 'url': 'data-source' }
})

Vue.config.productionTip = false;

Vue.prototype.$bus = new EventBus();

const locationUrl=window.location.href;

//加载系统
loadSystem(locationUrl);



//路由开始跳转
// router.beforeEach(function(to, from, next) {
//   // validateSession();
//   //跳转前打开loading图标
//   // comUtils.showLoading();
//   validateSession(to.path);
//   if(to.path)
//   next();
// });
//路由跳转结束
// router.afterEach(function(to) {
//   //界面跳转完成后 关闭提醒框
//   // comUtils.hideLoading();
// });


Vue.use(ViewUI);

import VueRouter from "vue-router";


let instance:any = null;
let router = null;

/**
 * 渲染函数
 * 两种情况：主应用生命周期钩子中运行 / 微应用单独启动时运行
 */
function render() {
  // 在 render 中创建 VueRouter，可以保证在卸载微应用时，移除 location 事件监听，防止事件污染
  router = new VueRouter({
    // 运行在主应用中时，添加路由命名空间 /vue
    base: window.__POWERED_BY_QIANKUN__ ? "/screen" : "/",
    mode: "history",
    routes,
  });

  // 挂载应用
  instance = new Vue({
    router,
    store,
    render: (h) => h(App),
  }).$mount("#app");
}

// 独立运行时，直接挂载应用
if (!window.__POWERED_BY_QIANKUN__) {
  render()
}

/**
 * bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。
 * 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
 */
export async function bootstrap() {
  console.log("GoScreenApp bootstraped");
}


let state={};
/**
 * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
 */
export async function mount(props:any) {
  console.log("GoScreenApp mount", props);

  // 设置通讯
  Vue.prototype.$onGlobalStateChange = props.onGlobalStateChange;
  Vue.prototype.$setGlobalState = props.setGlobalState;
  // 渲染
  render();
}

/**
 * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
 */
export async function unmount() {
  console.log("GoScreenApp unmount");
  instance.$destroy();
  instance = null;
  router = null;
}

核心代码就下面标示的：

没有啥特别的，度娘到处可以找到类似代码。

修改vue.config.js的配置

const packageName = require('./package.json').name;
const Setting = require('./src/setting.env');


module.exports = {
// 先写为/，后续会修改
    publicPath: '/',
//   输出目录重命名为项目名称，方便后期部署
    outputDir: packageName,
// 来自qiankun文档的修改
    configureWebpack: {
        output: {
            library: `GoScreenApp`,
            libraryTarget: 'umd',
            jsonpFunction: `webpackJsonp_GoScreenApp`,
        },
    },
    devServer: {
        open: false,
        // 建议添加端口，不同模块加载不同端口，方便开发制定加载
        port: Setting.devPort,
        // 必须添加，qiankun需要支持跨域
        headers: {
            'Access-Control-Allow-Origin': '*',
        },
    },
};

注意名称跟主应用的名称对上以及跨域的配置。

如果没有意外，启动主项目和子项目即可进行跳转访问了。

注意事项：

这里路由前缀是跟主应用中注册写的要一致：

src目录下添加public-path.js文件

if (window.__POWERED_BY_QIANKUN__) {
  // 动态设置 webpack publicPath，防止资源加载出错
  // eslint-disable-next-line no-undef
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}