主应用

1. 安装 qiankun

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

2. 在主应用中注册微应用

main.js

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'qiankun-children', //子应用name 和 子应用package.json里"name": "qiankun-children"一致
    entry: '//localhost:8081',
    container: '#yourContainer',
    activeRule: '/dome1',//当配置为字符串时会直接跟 url 中的路径部分做前缀匹配，匹配成功表明当前应用会被激活，子应用router.js base: window.__POWERED_BY_QIANKUN__ ? '/dome1' : '/',
  },
]);

if (!window.qiankunStarted) {
  window.qiankunStarted = true;
  setTimeout(()=>{
    start(
        sandbox: {    //样式隔离
          strictStyleIsolation: true
        }
    );
  },2000)
}

vue.config.js 允许跨域处理

  devServer: {
    port: 8008,
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
    overlay: {
      warning: false,
      errors: false
    }
  },

微应用

1. 导出相应的生命周期钩子

在main.js同级新建public-path.js

public-path.js

if (window.__POWERED_BY_QIANKUN__) {
    // eslint-disable-next-line no-undef
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

 main.js

import './public-path'

let instance = null;
function render(props = {}) {
	console.log(props)
  const { container } = props;
  instance = new Vue({
      router,
      store,
      i18n,
    render: (h) => h(App),
  }).$mount(container ? container.querySelector('#app') : '#app');
}
if(__webpack_public_path__){
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;

}
// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}
if(window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__){
  console.log(window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__,window,"--") ;
}

export async function bootstrap() {
  console.log('[vue] vue app bootstraped');
}
export async function mount(props) {
  console.log('[vue] props from main framework', props);
  render(props);
}
export async function unmount() {
  instance.$destroy();
  instance.$el.innerHTML = '';
  instance = null;
}

vue.config.js

const vueConfig = {
    publicPath:'./',
    devServer: {
      port:8081,
      headers: {
        'Access-Control-Allow-Origin': '*',
      },
    },
    configureWebpack: {
      output: {
        library: `${packageName}-[name]`,
        libraryTarget: 'umd',
        jsonpFunction: `webpackJsonp_${packageName}`,
      },
    },
}

然后分别运行俩个项目即可

打包部署

主项目和子项目在同一服务器同目录

改造主项目 main.js

registerMicroApps([
  {
    name: 'qiankun-children',
    entry: '/aaa/', 
    container: '#yourContainer',
    activeRule: '/dome1',
  },
]);

vue.config.js

const vueConfig = {

 publicPath:`/aaa/`,

}

标签：__,.__,框架,前端,js,qiankun,window,props
来源： https://blog.csdn.net/qq_28223305/article/details/122301593