icestark

icestark copied to clipboard

微模块 vite4 + vue3 构建微模块 主应用使用报错问题

微模块 以及vite 生成 改造

import { createApp, type App } from 'vue'

export { default } from './branch-detail/index.vue'

let vue: App<Element> | null = null

export function mount(ModuleCom: any, targetNode: Element, props: any) {
  vue = createApp(ModuleCom, props)
  vue.mount(targetNode)
}

export function unmount(targetNode: Element) {
  vue?.unmount()
  vue = null
  targetNode.innerHTML = ''
}

组件

<template>
  <div>branch-detailbranch-detailbranch-detailbranch-detail</div>
</template>

vite.config.ts

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  build: {
    lib: {
      entry: './src/main.ts',
      name: 'microModule',
      fileName: 'micro-module'
    },
    rollupOptions: {
      preserveEntrySignatures: 'exports-only',
    }
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

主应用引入。也是基于vite4+vue

<template>
  <div class="home">
    <div>About page</div>
    <div>主应用注册微模块</div>
    <div ref="microAppDom"></div>
    <MicroModule name="module-a"></MicroModule>
  </div>
</template>

<script setup lang="ts">
import { MicroModule, mountModule, registerModule, registerModules } from '@ice/stark-module/lib/modules';
import { ref, onMounted } from 'vue'


const microAppDom = ref<HTMLDivElement | null>(null)

const moduleInfo = {
  name: 'microModule',
  url: 'http://localhost:4000/micro-module.js',
}
onMounted(() => {
  mountModule(moduleInfo, microAppDom.value, {
    data: '主应用测试数据',
  })
})

</script>

报错