Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
zhyzhyzzz opened this issue Apr 18, 2024 · 1 comment

Comments

@zhyzhyzzz
Copy link

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
Copy link
Collaborator

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants