qiankun 微前端

qiankun - qiankunhttps://qiankun.umijs.org/zh

安装

$ yarn add qiankun # 或者 npm i qiankun -S

 主应用

import { registerMicroApps, start } from 'qiankun'
createApp(App).use(route).use(store).mount('#qiankunPiggyApp')

/**
 * Step1 初始化应用（可选）
 */
registerMicroApps([
  {
// 子应用名称
    name: "name",
// 子应用访问URL
    entry: "//localhost:8091",
// 子应用承载容器id
    container: "#view-main",
// 配置子应用访问条件
    activeRule: ['/router'],
  }
])

// 启动子应用
start()

子应用

let app = null;

function render (props = {}) {
  const { container } = props;
  app = new Vue({
    router,
    store,
    render: (h) => h(App)
  }).$mount(container ? container.querySelector('#app') : '#app')
}

// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

export async function bootstrap () {
  // console.log("[vue] vue app bootstraped");
  // 解决静态文件访问
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

export async function mount (props) {
  // console.log("[vue] props from main framework", props);
  render(props);
}

export async function unmount () {
  // app.unmount();
  app.$destroy()
  app.$el.innerHTML = ''
  app = null
}

 静态文件访问

export async function bootstrap () {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

部分文件404, 如element-icon

  output: {
    publicPath: `//localhost:${config.dev.port}/`, // 解决element-icon 显示
    library: `${packageName}-[name]`,
    libraryTarget: 'window',
    chunkLoadingGlobal: `webpackJsonp_${packageName}`,
  }
})

 publicPath: `//localhost:${config.dev.port}/`, // 解决element-icon 显示 

参考 

微应用打包之后-css-中的字体文件和图片加载-404https://qiankun.umijs.org/zh/faq#%E5%BE%AE%E5%BA%94%E7%94%A8%E6%89%93%E5%8C%85%E4%B9%8B%E5%90%8E-css-%E4%B8%AD%E7%9A%84%E5%AD%97%E4%BD%93%E6%96%87%E4%BB%B6%E5%92%8C%E5%9B%BE%E7%89%87%E5%8A%A0%E8%BD%BD-404

vite 微应用配置

vite+ vue3微应用https://www.cnblogs.com/ljx20180807/p/16048110.html插件

vite-plugin-qiankun

qiankun('sub-vite2-vue3', { useDevMode: true })],  // sub-vite2-vue3 为应用名