qiankun微前端

主项目

1、安装qiankun

npm i qiankun -S

2、main.js引入注册

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')

//引入
import { registerMicroApps, start } from 'qiankun';
// 注册微应用
registerMicroApps([
    {
      name: 'app_one',           //子项目名称
      entry: '//localhost:5173', // 子项目地址
      container: '#app_one',  // 在主项目中配置子项目将要显示的位置节点
      activeRule: '/',       //激活规则，可以通过设置不同的路由进行激活
      props: {} //传参       //子项目 主项目传参的通道
    }
  ]);
  // 启动 qiankun
  start({
      prefetch:'all' // 预加载
  });

二、子项目

1、安装@sh-winter/vite-plugin-qiankun

npm i @sh-winter/vite-plugin-qiankun

2、main.js配置

• Vue3.x

import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'

import { exportLifeCycleHooks, qiankunWindow } from '@sh-winter/vite-plugin-qiankun/dist/helper'
function render() {
    const app = createApp(App)
    app.mount('#app1') //此处的id和html中一致，最好不要与主项目的一致，以免冲突
}
exportLifeCycleHooks({
    bootstrap() {
        // do nothing.
    },
    mount(props) {
        render(props.container);
    },
    unmount() {
        app?.unmount();
    }
})
if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
    render();
}

3、vite.config.js配置

• Vue3.x

import {qiankunPlugin, transformAssetUrl } from '@sh-winter/vite-plugin-qiankun'
import { name as packageName } from './package.json'
export default defineConfig({
  base: `/${packageName}/`,
  plugins: [
    vue({
      template: {
        compilerOptions: {
          nodeTransforms: [transformAssetUrl]
        }
      }
    }),
    qiankunPlugin({ packageName })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },

})

三、问题解决

1、可能出现报错信息：

问题分析：一般实在网络较慢的时候出现，意思就是还没有加载好没法显示
问题解决：使用v-if绑定子项目显示的位置，在mounted后进行显示即可

四、一键启动

在两个项目同级目录执行npm init -y，并创建index.js文件

1、package.json配置：

{
  "name": "qiankun",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"node ./index.js" //在根目录执行npm run dev走这里，去执行index.js文件中的方法
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "child_process": "^1.0.2"
  }
}

2、index.js文件内容

const childProcess = require('child_process')
const path = require('path')
// 配置每个应用的路径
const filePath = {
  'app_one': path.join(__dirname, './app_one'),
  main: path.join(__dirname, './vue-project')
}


// cd 子应用的目录 npm run dev 启动项目
function runChild () {
  Object.values(filePath).forEach(item => {
     //配置项目启动命令
    childProcess.spawn(`cd ${item} && npm run dev`, { stdio: "inherit", shell: true })
  })
}
runChild()

启动成功：

最终效果