微前端（qiankun）项目开发及部署配置

一、主应用配置

注：开发框架 vue3，应用名称 micro_base

1. 安装 qiankun

// yarn
yarn add qiankun
// npm
 npm i qiankun -S

2. 添加子应用挂载节点
   在 app.vue 中加上
   用于子应用挂载，理论上可添加多个节点用于多个子应用挂载，但实际开发中为了代码简洁美观，建议使用一个节点即可。
3. 注册子应用
   在 utils 目录下创建 qiankunRegister.js，内容如下：

import { registerMicroApps, start } from "qiankun";
export const useQiankun = () => {
  const apps = [
    {
      name: "app_child", // 子应用名称
      entry:
        process.env.NODE_ENV == "development"
          ? "http://localhost:8081"
          : "/app_child/", // 微应用的入口
      container: "#appContainer", // 微应用的容器节点的选择器或者 Element 实例
      activeRule: "/child_example", // - 必选，微应用的激活规则（路由前缀，如 /child_example/promotion）
      props: {}, // 初始化时需要传递给微应用的数据
    },
  ];
  registerMicroApps(apps, {
    beforeLoad: [() => {}],
    beforeMount:  [() => {}],
    afterMount:  [() => {}],
    beforeUnmount:  [() => {}],
    afterUnmount:  [() => {}],
  });
  start({ experimentalStyleIsolation: true, prefetch: [] });
};

接着在入口文件 main.js 中引入并调用即可

import { useQiankun } from "@/utils/qiankunRegister";
useQiankun();

在 vue.config.js 文件的 devServer 中加上

headers: {
      "Access-Control-Allow-Origin": "*", // 设置允许跨域请求，否则会因为在其他端口号获取资源报错
}

二、子应用配置

注：开发框架 vue3，应用名称 app_child

1. 创建 public-path.js 文件
   在src目录下创建public-path.js文件，内容如下：

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

然后在 mian.js 文件最上方引入

import "./public-path";

2. 修改main.js

import "./public-path";
import { createApp } from "vue";
import App from "./App.vue";
import routes from "./router";
// 引入 vue-router 的方法
import { createRouter, createWebHistory } from "vue-router";

let router = null;
let instance = null;
function render({ container } = {}) {
  router = createRouter({
    routes,
    history: createWebHistory(),
  });
  instance = createApp(App);
  instance
    .use(store)
    .use(router)
    .mount(container ? container.querySelector("#app") : "#app"); 
}
// 如果是单独启动的子文件，保证仍能正常运行
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}
// 生命周期的钩子函数
// 导出第一次进入当前子应用的钩子函数
export async function bootstrap() {
  // console.log("第一次进入app_child");
}
// 导出每次创建挂载时的钩子函数
export async function mount(props) {
  await render(props);
}
// 导出每次销毁时的钩子函数
export async function unmount() {
  instance.unmount();
  instance._container.innerHTML = null;
  instance = null;
  router = null;
}

3. vue.config.js 中的配置
   publicPath要与注册子应用入口地址一致

publicPath: process.env.NODE_ENV == "development" ? "/" : "/app_child/",

在 configureWebpack 中加入以下配置

output: {
      library: `app_child`,
      libraryTarget: "umd", // 把微应用打包成 umd 库格式
      chunkLoadingGlobal: `webpackJsonp_app_child`, // webpack版本高，已弃用jsonpFunction
 },

devServer中加上

headers: {
 	"Access-Control-Allow-Origin": "*",
},

三、nginx配置

例：部署在10.0.xxx.xxx环境下，即 xxx.xx.com，项目包分别在 /home/app/micro_base/ 和 /home/app/micro_base/app_child/
在nginx配置文件 xxx.conf文件中添加如下配置
目录： /usr/local/nginx/conf/vhosts/

#端口需唯一
upstream micro_base {
 server 10.0.xxx.xxx:43618;
}
upstream app_child {
 server 10.0.xxx.xxx:43619;
}

然后在下方相应位置（server）加上

  location /micro_base {
  	proxy_pass http://micro_base/;
  }
  location /app_child {
  	proxy_pass http://app_child /;
  }
  # 除上述之外，防止刷新页面404，需根据子应用 activeRoute 加上代理
  location /child_example {
  	proxy_pass http://micro_base/;
  }
  # 若子应用存在三级路由 ，如/child_example/promotion/detail，则需加上
  location /child_example/promotion {
  	proxy_pass http://micro_base/;
  }

2. 创建 microbase.conf

server {
    listen      43618 ;
    server_name  default_server;
    location / {
	    root   /home/app/micro_base;
	    index  index.html index.htm;
	    add_header Access-Control-Allow-Origin *;
	    try_files $uri $uri/ /index.html
	    expires -1;
	    add_header Cache-Control "no-cache, no-store";
    }
    # 与子应用 publicPath 路径需一致，每个子应用皆需加一份下列配置
    location /app_child {
	    alias  /home/app/micro_base/app_child/;
	    index  index.html index.htm;
	    try_files $uri $uri/ /app_child/index.html;
	    if ($request_filename ~* .*\.(?:htm|html)$)
            {
               add_header Cache-Control "no-cache, no-store";
            }
    }
    error_page 405 =200 $uri;  
  }

3. 创建 appchild.conf（为了可独立访问子应用）

server {
    listen      43619;
    server_name  default_server;
     location / {
  		add_header Access-Control-Allow-Origin *;
      	add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
        add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
        root   /home/app/micro_base/app_child/;
        try_files $uri $uri/ /index.html;
    }
}

添加完以上配置后重启nginx即可：service nginx reload