2、然后在 main.js 中注册微应用并 start 即可。

提示：当微应用信息注册完之后，一旦浏览器的 url 发生变化，便会自动触发 qiankun 的匹配逻辑，所有 activeRule 规则匹配上的微应用就会被插入到指定的 container 中，同时依次调用微应用暴露出的生命周期钩子。

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
 
Vue.config.productionTip = false
 
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
 
// 引入 qiankun 组件
import { registerMicroApps, start } from 'qiankun';
 
// 注册微应用信息
registerMicroApps([
  {
    name: 'hangge-app-1',
    entry: 'http://localhost:9091',
    container: '#container',
    activeRule: '/app1',
  },
  {
    name: 'hangge-app-2',
    entry: 'http://localhost:9092',
    container: '#container',
    activeRule: '/app2',
  }
]);
// 启动 qiankun
start();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

当然微应用也不是必须要跟路由关联，我也可以选择手动加载微应用的方式：

import { loadMicroApp } from 'qiankun';
 
loadMicroApp({
  name: 'hangge-app-1',
  entry: 'http://localhost:9091',
  container: '#container',
});
1
2
3
4
5
6
7

微应用开发–demo1/demo2

1、首先在微应用的 src 目录下新增 public-path.js 文件，内容如下：

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

2、接着修改 main.js 文件，在最顶部引入 public-path.js，导出 bootstrap、mount、unmount 三个生命周期钩子，以供主应用在适当的时机调用。

import './public-path';
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
 
Vue.config.productionTip = false
 
let instance = null;
 
// 页面渲染方法
function render(props = {}) {
  const { container } = props;
  instance = new Vue({
    router,
    store,
    render: (h) => h(App),
  }).$mount(container ? container.querySelector('#app') : '#app');
}
 
// 独立运行时就直接渲染
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}
 
/**
 * bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发
 * 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
 */
export async function bootstrap() {
  console.log('[vue] vue app bootstraped');
}
 
/**
 * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
 */
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;
  router = null;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

3、修改 router/index.js，设置路由 base，值和该微应用在主应用那边的 activeRule 是一样的。

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',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]
 
const router = new VueRouter({
  mode: 'history',
  base: window.__POWERED_BY_QIANKUN__ ? '/app1/' : process.env.BASE_URL,
  routes
})
 
export default router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

4、最后编辑项目根目录下的 vue.config.js 文件（如果没有则手动创建一个），修改 webpack 打包，允许开发环境跨域和 umd 打包。

const { name } = require('./package');
module.exports = {
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*', //允许开发环境跨域
    },
  },
  configureWebpack: {
    output: {
      library: `${name}-[name]`,
      libraryTarget: 'umd', // 把微应用打包成 umd 库格式
      jsonpFunction: `webpackJsonp_${name}`,
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

5、经过上面修改后访问可能会报“error ‘webpack_public_path’ is not defined”错误。这个是 eslint 的问题，webpack_public_path 不是全局变量所导致的。我们在 package.json 文件中 eslintConfig 配置全局变量后重起服务即可解决。

6、vue.config.js修改后可能会出现报错

这是应为webpack版本的问题。webpack4不会出现这种问题。出现这个问题是因为webpack5的原因。webpack5将jsonpFunction更名为chunkLoadingGlobal
所以webpack5的vue.config.js配置将jsonpFunction改为chunkLoadingGlobal就不会报错了

const { name } = require("./package");
module.exports = {
  devServer: {
    headers: {
      "Access-Control-Allow-Origin": "*", //允许开发环境跨域
    },
  },
  configureWebpack: {
    output: {
      library: `${name}-[name]`,
      libraryTarget: "umd", // 把微应用打包成 umd 库格式
      chunkLoadingGlobal: `webpackJsonp_${name}`,
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15