qiankun微前端使用记录

1、新建两个项目，一个名为parent（主应用），注意主应用的CSS样式尽可能的自己手写，避免使用一些UI框架后，样式与微应用的产生冲突，一个child1（微应用）

2、主应用安装qiankun

npm i qiankun -S

3、主应用中新建一个子路由界面（child1），注意路径，用于接下来的微应用的渲染

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/child1/*',//注意路径
    name: 'child1',
    component: () => import('../views/child1.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

4、child1界面DOM结构如下

<template>
  <div>
    <div id="child1" class="child1"></div>
  </div>
</template>
<script>
export default {
  
}
</script>
<style scoped>
.child1{
  width: 100%;
  height: 500px;
}
</style>

5、设置App.vue界面，增加路由跳转链接，注意路径填写

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/child1/">微应用1</router-link>
    </div>
    <router-view/>
  </div>
</template>

6、在main.js中，增加启动微前端配置信息，如下

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

Vue.config.productionTip = false
import { registerMicroApps,start } from 'qiankun';
registerMicroApps([{
    name: 'child1',//应用名称，唯一
    entry: process.env.NODE_ENV === 'development' ? '//localhost:1011' : '/child/child1/',//开发环境与生产环境下的启动路径
    container: '#child1',//与child1界面中的DOM结构的ID对应
    activeRule: '/child1/',//路径，与路由对应
    props:{//额外参数
      getToken:() => '获取到Token信息'
    }
  }]);
new Vue({
  router,
  render: function (h) { return h(App) }
}).$mount('#app')
//启动qiankun
start({
  sandbox: {
    // strictStyleIsolation = false，才可以获取到子应用的dom节点，主应用可修改子应用样式，但是子应用不可修改主应用的样式。
    strictStyleIsolation: true,
    experimentalStyleIsolation: true
  }
})

7、接下来配置微应用child1，新建vue.config.js文件，并且新增以下代码，建议将静态资源，如CSS、图片、JS代码放置在src文件夹里面，这样才会受publicPath的打包路径自动配置

const { name } = require('./package')
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/child/child1/' : '/',//生产环境下的路径与开发环境的路径
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
    port:1011//对应第六步中配置的开发环境下的启动端口号
  },
  configureWebpack:{
    output: {
      library: 'child1',//必须与第六步中配置的微应用名称一致
      libraryTarget: 'umd'
    }
  }
};

8、在微应用的src文件夹下，新建public-path.js并新增以下代码

if (window.__POWERED_BY_QIANKUN__) {
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

9、修改微应用的路由配置文件

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: function () {
      return import(/* webpackChunkName: "about" */ '../views/About.vue')
    }
  }
]

/* const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
}) */

export default routes//导出界面路径信息即可

10、在微应用中的main.js增加配置

import './public-path';//注意在头部引用第八步创建的文件
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';
import routes from './router';

Vue.config.productionTip = false;

let router = null;
let instance = null;
function render(props = {}) {
  const { container } = props;
  router = new VueRouter({
    base: window.__POWERED_BY_QIANKUN__ ? '/child1/' : '/child/child1/',//激活路径与主应用配置的路由对应
    mode: 'history',
    routes,
  });
  instance = new Vue({
    router,
    render: h => h(App),
  }).$mount(container ? container.querySelector('#app') : '#app');
}

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

/**
 * bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。
 * 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
 */
export async function bootstrap({getToken}) {
  //获取第六步传递过来的参数，绑定全局，即可在界面任意出获取主应用的token信息
  Vue.prototype.$getToken = getToken;
  //注意，主微应用通信不会太频繁，还可以使用浏览器缓存的形式代替数据传递，自行选择
}

/**
 * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
 */
export async function mount(props) {
  render(props);
}

/**
 * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
 */
export async function unmount() {
  instance.$destroy();
  instance.$el.innerHTML = '';
  instance = null;
  router = null;
}

11、分别启动两个应用，届时就能看到微前端已成功启动

12、预览完效果，接下来我们看打包后的效果，首先我们的打包必须是在同一IP与同一端口下，（其它情况请自行浏览官网查看配置项），https://qiankun.umijs.org/zh/cookbook#%E5%A6%82%E4%BD%95%E9%83%A8%E7%BD%B2

13、分别打包两个应用，然后将主应用与微应用按照以上文件路径形式存放

14、启动服务，即可在生产环境下预览效果，后续想要增加微应用，继续参照以上步骤一一添加再进行打包即可

参考文档：https://qiankun.umijs.org/zh