1、微前端概论

1. 微前端概念

类型<iframe></iframe>一样，只不过微前端是用fetch去请求js并渲染在指定的DOM容器。

· 跟技术栈无关，任何前端技术栈都可以接入。

· 多个应用结合在一起，可以一起运行，又可以单独运行。

· 一个复杂庞大的项目拆成多个微应用，单独开发、单独部署、单独测试，互不影响。

· 原理是通过在主应用引入每个子应用的入口文件(main.js)，进行解析，并指定渲染的容器

2. 什么时候需要用到微前端

庞大的系统需要拆分给不同团队去做时。

系统里面有很多个模块，模块里面又很多个子模块时。

2、微前端使用说明

qiankun（乾坤）就是一款由蚂蚁金服推出的比较成熟的微前端框架，基于 single-spa 进行二次开发，用于将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。

基于 qiankun+vue2.0 技术栈实现的前端微应用架构，实现了动态路由主子应用以及子子应用之间的通信，并做了简单的自动化脚本命令

2、关于项目依赖包 common

包内容简介：

所有子应用都需要对主应用下发的数据进行接收及处理、如果数据修改则通知到其他应用以及对主应用下发的路由数据进行处理，因为这些逻辑完全一样，因此将这些实现逻辑提取为一个 npm 包统一管理。

实现的功能：

在 vuex 中动态添加了 global 模块及 routes 模块；

global 模块：封装了全局下发的数据，以及数据修改通知到其他应用；
routes 模块：路由数据的封装以及组件的导入。

3、主项目中微前端的相关文件说明

微前端说明以及使用-LMLPHP

3、微前端子应用代码改造

a.修改package.json：

name属性为应用名。
设置header允许跨域请求。

b.修改vue.config.js的publicPath属性应用名。

const packageName = require("./package.json").name;
const Timestamp = new Date().getTime();

module.exports = {
  assetsDir: "./",
  publicPath: process.env.NODE_ENV === "production" ? "/sub/" : "/",
  outputDir: "sub",
  configureWebpack: {
    output: {
      library: `${packageName}-[name]`,
      libraryTarget: "umd",
      jsonpFunction: `webpackJsonp_${packageName}`,
      filename: "js/[name]." + Timestamp + ".js",
      chunkFilename: "js/[name]." + Timestamp + ".js",
    },
  },
  devServer: {
    port: 8012, // 在.env中VUE_APP_PORT=7788，与父应用的配置一致
    headers: {
     "Access-Control-Allow-Origin": "*", // 主应用获取子应用时跨域响应头
   },
  },
};

Dawnzhang

微前端说明以及使用