qiankun+vue3+vite

基于 vue + vite 版本，如果不是请另看文档 链接

1. 基座配置

// 安装依赖
yarn add qiankun # 或者 npm i qiankun -S  

// main.ts vue 程序主入口
import { registerMicroApps, start } from 'qiankun'
registerMicroApps([
  {
    name: 'vueApp3', // 子应用 名字 
    entry: '//localhost:5004', // 子应用的 ip 地址
    container: '#clContainer', // 基座中对应的dom容器id 可放在index.html中
    activeRule: '/cl-demo' // 激活当前子应用时路径前自动拼接的路径
  }
])
// 启动 qiankin
start({
    // 沙盒模式，默认是开启的，experimentalStyleIsolation  开启严格的样式隔离模式
  sandbox: { experimentalStyleIsolation: true }
})

// router.ts 
const router = createRouter({
  history: createWebHistory(),  // 路由换成 History 模式
  ...//other
})

2. 子应用配置

// 安装 vite-qiankun 插件
yarn add vite-plugin-qiankun

// vite.config.ts
// vite 版本的 乾坤
import qiankun from 'vite-plugin-qiankun'

export default ({ command, mode }) => {
    return {
        base:'/cl-demo'  // qiankun 和基座中 activeRule 保持一致
        serve:{
          	headers: {
                'Access-Control-Allow-Origin': '*', // 配置跨域
                'Access-Control-Allow-Headers': '*',
                'Access-Control-Allow-Credentials': 'true',
                'Access-Control-Allow-Methods': '*',
                'Cache-Control': 'no-cache'
          	},
      		origin: 'http://localhost:5004'                  
       }
       plugins: [
         // 子应用的名称
         qiankun('vueApp3', {
           useDevMode: true
         }),
       ]
           
    }
}

注意点

• vue是单html，如果基座修改了html的式样，会对子应用式样有影响
• webpage 和 vite 的配置不一样，装的qiankun的包也不一样
• 如果基座有路由拦截，注册时候的 activeRule 的路由一定要给白名单！
• 子应用图片路径不对的问题，一定要写绝对路径，从src开始！不然基座找不到