项目介绍

主应用采用vite+vue3.2+pinia搭建，主应用中加载了两个子应用。子应用采用webpack+vue2.6搭建。主应用的main.js中加载子应用的代码如下：

registerMicroApps([
    {
        name: 'app1',
        entry: 'http://localhost:8087', // 该地址为子应用app1，部署上线的地址
        container: '#container',
        activeRule: '/app1',
    },{
        name: 'app2',
        entry: 'http://localhost:8088',// 该地址为子应用app2，部署上线的地址
        container: '#container',
        activeRule: '/app2',
        props:{
            id:"1231"
        }
    }
]);

说明：上述http://localhost:8087 为本机上启的服务，真实项目环境可以替换成app1部署的服务器地址。

子应用中main.js的核心代码如下：

import './public-path';
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';
import routes from './router';
import store from './store';

Vue.config.productionTip = false;

let router = null;
let instance = null;
function render(props = {}) {
  const { container } = props;
  router = new VueRouter({
    base: window.__POWERED_BY_QIANKUN__ ? '/app2' : '/',
    mode: 'history',
    routes,
  });

  instance = 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');
}
export async function mount(props) {
  props.onGlobalStateChange((state, prev) => {
    // state: 变更后的状态; prev 变更前的状态 主要是主应用与子应用的数据共享
    console.log("子应用中变化",state, prev);
  },true);
  render(props);
}
export async function unmount() {
  instance.$destroy();
  instance.$el.innerHTML = '';
  instance = null;
  router = null;
}

打包上线

1.方式一：主应用与子应用分别部署在不同服务器。主应用与子应用分别打。本地采用Nginx1.13.9。

步骤1：将主应用的打包后的文件放在Nginx中的html文件夹中，如下图：

步骤2：在Ngi新建app1文件夹，将子应用1打包后的文件放在其中。如下图：

步骤3：按步骤2的方式，将子应用2放在，Nginx的app2文件夹中，如下图：

步骤4：Nginx中的相关配置

4.1nginx.conf文件中的配置： 4.2nginx.conf文件中在加两个server，模拟启动http://localhost:8087 与http://localhost:8088 服务，配置如下：

server {
        default_type 'text/html';
        charset utf-8;
        listen       8087;

        server_name  backendgt.wq.com;
        client_header_buffer_size 128k;
        large_client_header_buffers 4 128k;
        add_header Set-Cookie loginSessionHttps;
        port_in_redirect off; #防止跳转的时候带了端口号,会导致404
        location / {
		root   app1; #指定访问跟路径文件夹为app1
		index  index.html index.htm;
		add_header 'Access-Control-Allow-Origin' '*';
		add_header 'Access-Control-Allow-Credentials' 'true';
		try_files $uri $uri/ /index.html;
        }
}
server {
        default_type 'text/html';
        charset utf-8;
        listen       8088;

        server_name  backendgt.wq.com;
        client_header_buffer_size 128k;
        large_client_header_buffers 4 128k;
        add_header Set-Cookie loginSessionHttps;
        port_in_redirect off; #防止跳转的时候带了端口号,会导致404
        location / {
		root   app2;
		index  index.html index.htm;
		add_header 'Access-Control-Allow-Origin' '*';
		add_header 'Access-Control-Allow-Credentials' 'true';
		try_files $uri $uri/ /index.html;
        }
}

启动Nginx，最终效果如下：

项目地址：gitee.com/baoyongheng…

乾坤打包主应用与子应用

项目介绍

打包上线