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 · 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

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

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

3 participants