Skip to content
New issue

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

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

Already on GitHub? # to your account

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

Open
zhyzhyzzz opened this issue Apr 18, 2024 · 2 comments

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-

@menkeydyvh
Copy link

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

官方的vite用例能升级一下吗还是再vite2 而且 vite-plugin-index-html 的插件与官方用例也不匹配

我用的是 vite5 也配置了loadScriptMode: 'import' 一样也是出现 Cannot read property 'mount' of null

麻烦官方给个用例已经处理了一天要疯了

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

No branches or pull requests

3 participants