icestark
icestark copied to clipboard
严格按照文档上的写的,为啥还是会报:Cannot read property 'mount' of null
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;
}
});
})
loadScriptMode: 'import'
支持的的 esm 标准的产物,比如 vite 打包,关注下子应用的 产物规范。 https://micro-frontends.ice.work/docs/api/ice-stark/#loadscriptmode-