1 {
 2   "name": "qiankun-test",
 3   "version": "1.0.0",
 4   "description": "",
 5   "main": "index.js",
 6   "scripts": {
 7     "install": "npm-run-all --serial install:*",
 8     "install:main": "cd main && yarn install",
 9     "install:sub-vue": "cd sub-vue && yarn install",
10     "install:sub-react": "cd sub-react && yarn install",
11     "start": "npm-run-all --parallel start:*",
12     "start:sub-react": "cd sub-react && yarn start",
13     "start:sub-vue": "cd sub-vue && yarn serve",
14     "start:main": "cd main && yarn serve",
15     "build": "npm-run-all --serial build:*",
16     "build:main": "cd main && yarn build",
17     "build:sub-vue": "cd sub-vue && yarn build",
18     "build:sub-react": "cd sub-react && yarn build",
19     "test": "echo \"Error: no test specified\" && exit 1"
20   },
21   "keywords": [],
22   "author": "",
23   "license": "ISC",
24   "devDependencies": {
25     "npm-run-all": "^4.1.5"
26   }
27 }

1 VUE_APP_SUB_VUE=http://localhost:5501
2 VUE_APP_SUB_REACT=http://localhost:5502

1 VUE_APP_SUB_VUE=http://localhost:5050/subapp/sub-vue/
2 VUE_APP_SUB_REACT=http://localhost:5050/subapp/sub-react/

 1 module.exports = {
 2   devServer: {
 3     port: 5500,
 4   },
 5   chainWebpack: config => {
 6     config.plugin(\'html\')
 7       .tap((args) => {
 8         args[0].title = \'qiankun-test\'
 9         return args
10       })
11   }
12 };

 1 const microApps = [
 2   {
 3     name: \'sub-vue\',
 4     entry: process.env.VUE_APP_SUB_VUE,
 5     activeRule: \'/sub-vue\'
 6   },
 7   {
 8     name: \'sub-react\',
 9     entry: process.env.VUE_APP_SUB_REACT,
10     activeRule: \'/sub-react\'
11   }
12 ]
13 
14 const apps = microApps.map(item => {
15   return {
16     ...item,
17     container: \'#subapp-viewport\', // 子应用挂载的div
18     props: {
19       routerBase: item.activeRule, // 下发基础路由
20     }
21   }
22 })
23 
24 export default apps

 1 import Vue from \'vue\'
 2 import App from \'./App.vue\'
 3 import { registerMicroApps, start, setDefaultMountApp } from \'qiankun\'
 4 import microApps from \'./micro-app\'
 5 
 6 Vue.config.productionTip = false
 7 
 8 new Vue({
 9   render: h => h(App),
10 }).$mount(\'#app\')
11 
12 const config = {
13   beforeLoad: [
14       app => {
15           console.log("%c before load",
16           \'background:#0f0 ; padding: 1px; border-radius: 3px;  color: #fff\',
17           app);
18       }
19   ], // 挂载前回调
20   beforeMount: [
21       app => {
22           console.log("%c before mount",
23           \'background:#f1f ; padding: 1px; border-radius: 3px;  color: #fff\',
24           app);
25       }
26   ], // 挂载后回调
27   afterUnmount: [
28       app => {
29           console.log("%c after unload",
30           \'background:#a7a ; padding: 1px; border-radius: 3px;  color: #fff\',
31           app);
32       }
33   ] // 卸载后回调
34 }
35 
36 registerMicroApps(microApps, config)
37 setDefaultMountApp(microApps[0].activeRoule) // 默认打开第一个子项目
38 start()

 1 <template>
 2   <div id="app">
 3     <div class="layout-header">
 4       <div class="logo">QIANKUN-WUZHIQUAN</div>
 5       <ul class="sub-apps">
 6         <li v-for="item in microApps" :class="{active: item.activeRule === current}" :key="item.name" @click="goto(item)">{{ item.name }}</li>
 7       </ul>
 8     </div>
 9     <div id="subapp-viewport"></div>
10   </div>
11 </template>
12 
13 <script>
14 import microApps from \'./micro-app\'
15 
16 export default {
17   name: \'App\',
18   data () {
19     return {
20       microApps,
21       current: \'/sub-vue\'
22     }
23   },
24   methods: {
25     goto (item) {
26       console.log(item)
27       this.current = item.activeRule
28       history.pushState(null, item.activeRule, item.activeRule) // 没引入路由，所以不能用路由切换
29     },
30   },
31   created() {
32     const path = window.location.pathname
33     if (this.microApps.findIndex(item => item.activeRule === path) >= 0) {
34       this.current = path
35     }
36   },
37 }
38 </script>
39 
40 <style>
41 html, body{
42   margin: 0 !important;
43   padding: 0;
44 }
45 .layout-header{
46   height: 50px;
47   width: 100%;
48   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
49   line-height: 50px;
50   position: relative;
51 }
52 .logo {
53   float: left;
54   margin: 0 50px;
55 }
56 .sub-apps {
57   list-style: none;
58   margin: 0;
59   overflow: hidden;
60 }
61 .sub-apps li{
62   list-style: none;
63   padding: 0 20px;
64   cursor: pointer;
65   float: left;
66 }
67 .sub-apps li.active {
68   color: #42b983;
69   text-decoration: underline;
70 }
71 </style>

 1 const port = 5501;
 2 const { name } = require(\'../package.json\')
 3 module.exports = {
 4   publicPath: "./",
 5   devServer: {
 6     port,
 7     headers: {
 8       \'Access-Control-Allow-Origin\': \'*\'
 9     }
10   },
11   configureWebpack: {
12     output: {
13       // 把子应用打包成 umd 库格式
14       library: `${name}-[name]`,
15       libraryTarget: \'umd\',
16       jsonpFunction: `webpackJsonp_${name}`
17     }
18   }
19 };

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: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue")
  }
];
export default routes;

 1 import Vue from "vue";
 2 import App from "./App.vue";
 3 import routes from "./router";
 4 import store from "./store";
 5 import VueRouter from "vue-router";
 6 
 7 Vue.config.productionTip = false;
 8 
 9 let install = null;
10 function render(props = {}) {
11   const { container, routerBase } = props;
12   const router = new VueRouter({
13     base: window.__POWERED_BY_QIANKUN__ ? routerBase : process.env.BASE_URL,
14     mode: "history",
15     routes
16   });
17   install = new Vue({
18     router,
19     store,
20     render: h => h(App)
21   }).$mount(container ? container.querySelector("#app") : "#app");
22 }
23 if (window.__POWERED_BY_QIANKUN__) {
24   // eslint-disable-next-line
25   __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
26 } else {
27   render();
28 }
29 
30 export async function bootstrap() {}
31 
32 export async function mount(props) {
33   render(props);
34 }
35 export async function unmount() {
36   install.$destroy();
37   install.$el.innerHTML = ""; // 子项目内存泄露问题
38   install = null;
39 }

1 SKIP_PREFLIGHT_CHECK=true
2 PORT=5502
3 PUBLIC_URL=/

1 PUBLIC_URL=/subapp/sub-react

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }

 1 const { name } = require(\'./package.json\');
 2 
 3 module.exports = {
 4   webpack: function override(config, env) {
 5     config.entry = config.entry.filter(
 6       (e) => !e.includes(\'webpackHotDevClient\')
 7     );
 8 
 9     config.output.library = `${name}-[name]`;
10     config.output.libraryTarget = \'umd\';
11     config.output.jsonpFunction = `webpackJsonp_${name}`;
12     return config;
13   },
14   devServer: (configFunction) => {
15     return function (proxy, allowedHost) {
16       const config = configFunction(proxy, allowedHost);
17       config.open = false;
18       config.hot = false;
19       config.headers = {
20         \'Access-Control-Allow-Origin\': \'*\',
21       };
22       // Return your customised Webpack Development Server config.
23       return config;
24     };
25   },
26 };

1 if (window.__POWERED_BY_QIANKUN__) {
2     // eslint-disable-next-line
3     __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
4     //__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
5 }

 1 import \'./public-path\'
 2 import React from \'react\';
 3 import ReactDOM from \'react-dom\';
 4 import \'./index.css\';
 5 import App from \'./App\';
 6 
 7 function render() {
 8   ReactDOM.render(
 9     <App />,
10     document.getElementById(\'root\')
11   );
12 }
13 
14 if (!window.__POWERED_BY_QIANKUN__) {
15   render();
16 }
17 /**
18  * bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。
19  * 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
20  */
21 export async function bootstrap() {
22   console.log(\'react app bootstraped\');
23 }
24 /**
25  * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
26  */
27 export async function mount(props) {
28   render();
29 }
30 /**
31  * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
32  */
33 export async function unmount() {
34   ReactDOM.unmountComponentAtNode(document.getElementById(\'root\'));
35 }
36 /**
37  * 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
38  */
39 export async function update(props) {
40   console.log(\'update props\', props);
41 }

import \'whatwg-fetch\';
import \'custom-event-polyfill\';
import \'core-js/stable/promise\';
import \'core-js/stable/symbol\';
import \'core-js/stable/string/starts-with\';
import \'core-js/web/url\';