ice-lab / icestark

:tiger: Micro Frontends solution for large application(面向大型应用的微前端解决方案),站点国内镜像:https://icestark.gitee.io
https://micro-frontends.ice.work
MIT License
2.03k stars 173 forks source link

严格按照文档上的写的,为啥还是会报:Cannot read property 'mount' of null #739

Open zhyzhyzzz opened 5 months ago

zhyzhyzzz commented 5 months ago

sub vue2 import Vue from 'vue'; import { isInIcestark, setLibraryName } from '@ice/stark-app'; import App from './App.vue'; import router from './router';

// Vue.use(ElementUI);

Vue.config.productionTip = false;

let vue = null;

// set in vue.config.js setLibraryName('icestark-vue-demo');

export function mount(props) { const { container } = props; vue = new Vue({ router, mounted: () => { console.log('App mounted'); }, destroyed: () => { console.log('App destroyed'); }, render: h => h(App), }).$mount();

// for vue don't replace mountNode container.innerHTML = ''; container.appendChild(vue.$el); }

export function unmount() { if (vue) vue.$destroy(); vue.$el.innerHTML = ''; vue = null; }

if (!isInIcestark()) { // 初始化 vue 项目 // eslint-disable-next-line no-new new Vue({ router, el: '#childVue2', mounted: () => { console.log('App mounted'); }, destroyed: () => { console.log('App destroyed'); }, render: h => h(App), }); }

主应用 vue3 onMounted(() => { const container = document.getElementById('iceMainContainer') as HTMLElement; registerMicroApps([ { name: 'icestark-vue-demo', activePath: '/icestark-vue-demo', title: '商家平台', loadScriptMode: 'import', // React app demo: https://github.com/ice-lab/react-materials/tree/master/scaffolds/icestark-child // entry: 'http://iceworks.oss-cn-hangzhou.aliyuncs.com/icestark/child-seller-ice-vite/index.html', entry: 'http://192.168.4.110:8080/', container, } ]);

start({
  onLoadingApp: () => {
    loading.value = true;
  },
  onFinishLoading: () => {
    loading.value = false;
  },
  onRouteChange: (_, pathname) => {
    // 处理微应用间跳转无法触发 Vue Router 响应
    router
      .push(pathname)
      .catch(() => {})
  },
  onActiveApps: (activeApps) => {
    microAppsActive.value = !!(activeApps || []).length;
  }
});

})

ClarkXia commented 5 months ago

loadScriptMode: 'import' 支持的的 esm 标准的产物,比如 vite 打包,关注下子应用的 产物规范。 https://micro-frontends.ice.work/docs/api/ice-stark/#loadscriptmode-