为什么要用微前端？如何使用乾坤微前端？

港控/mmm° 2023-09-28 15:50 53阅读 0赞

**目录**

1.效果图：

2.为什么要用：

2.1.项目越来越大，不好维护时

2.2.如果你不忙，想使用最新的技术又不想影响开发。

2.3.比如好不容易找到一个轮子，发现人家用的技术栈和自己的项目不一样时

2.4.用起来简单不算麻烦，目前社区逐步成熟了

3.怎么用：

3.1 原项目的步骤：

3.2 接下来是配置子项目步骤：

到这就完成了，我这里还遇到一个不大不小的问题：

--------------------

### 1.效果图： ###

> 从项目A到项目B，就像是普通的页面跳转一样，但其实是两个项目之间来回“横跳”

![0d4c77ba112546a4af0d91dfaf23faf6.gif][]

--------------------

### 2.为什么要用： ###

> #### 2.1.项目越来越大，不好维护时 ####
> 
> #### 2.2.如果你不忙，想使用最新的技术又不想影响开发。 ####
> 
> **比如说我，现在的项目用的是vue2+ElementUI,使用了乾坤微前端后，可视化大屏用的是vue3.2+TS+vite,然后还有一个页面用的是react Hooks+ts,这样一个项目我就用了三套技术栈，对于提升技术很有帮助。**
> 
> #### 2.3.比如好不容易找到一个轮子，发现人家用的技术栈和自己的项目不一样时 ####
> 
> #### 2.4.用起来简单不算麻烦，目前社区逐步成熟了 ####

--------------------

### 3.怎么用： ###

> 官网：[qiankun - qiankun][]
> 
> 官网有对于vue、react、以及其他的配置过程
> 
> 我是以vue2+element UI+webpack为主项目，写一个副项目为vue3+element-plus+vite

--------------------

#### 3.1 原项目的步骤： ####

**第一步，安装依赖，在你的原项目：**

$ yarn add qiankun # 或者 npm i qiankun -S

--------------------

**第二步，main.js中，在你的原项目：**

import Vue from "vue";
    import App from "./App.vue";
    import router from "./router";
    import store from "./store";
    import { registerMicroApps, start } from "qiankun"; //++++++++++
    
    Vue.config.productionTip = false;//++++++++++
    
    new Vue({
      router,
      store,
      render: (h) => h(App),
    }).$mount("#app");
    // 在主应用中注册子应用 //++++++++++
    registerMicroApps([
      {
        name: "vueApp", //子应用名称-自己设置
        entry: "//localhost:8091", //子应用启动的地址-自己设置
        container: "#container", // 子应用在主应用的容器名称-自己设置
        activeRule: "/app-vue", // 路由地址，后面用push（）或者route.link.to-自己设置
        props: {
          data: "child子应用",
        }, //传参
      },
    ]);
    // 启动
    start();

--------------------

**第三步，vue.config.js，在你的原项目：**

module.exports = {
      devServer: {
        port: 8090, //你自己项目的端口号
        headers: {
          "Access-Control-Allow-Origin": "*", // 允许跨域访问子应用页面 ++++++++++
        },
      },
    };

**第四步：app.js，在你的原项目：**

> **这一步不必按照我的来，其实就是你自己自行加一个跳转的链接，用$router.push()或者route.link.to跳过去**

<div id="app">
        <span><router-link to="/">点击跳转到父页面</router-link></span>
        <span><router-link to="/app-vue">点击跳转到子页面</router-link></span>
        <router-view />
        <div id="container">
          
        </div>
      </div>

**至此，主应用配置完毕**

--------------------

#### 3.2 接下来是配置子项目步骤： ####

**第一步，在src文件夹下新建public-path.js文件，并添加如下代码**

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

> 这一步，90%概率会遇到**webpack\_public\_path** 未定义，这是因为EsLint的检测机制，所以我们需要在**package.json**中的**eslintConfig**中进行如下配置

"eslintConfig": {
       	......
        "globals": {
          "__webpack_public_path__": true
        }
      },

--------------------

**第二步，main.js中，在你的子项目：**

> 注意下：这里和官网的配置不一样，这里很容易报错，按照我这个来就行
> 
> 还有一个注意点：
> 
> **还有要注意的是我这里修改了`#app`为`#app-vue`，原因为\#app在主应用中已使用，会冲突，所以对应的index.html与App.vue中也应当修改为`#app-vue`**

import "./public-path"; //+++++++++++++++++++++++
    import Vue from "vue";
    import App from "./App.vue";
    import router from "./router";
    
    Vue.config.productionTip = false;//+++++++++++++++++++++++
    //+++++++++++++++++++++++
    let instance = null;
    function render(props = {}) {
      const { container } = props;
      instance = new Vue({
        router,
        render: (h) => h(App),
      }).$mount(container ? container.querySelector("#app-vue") : "#app-vue");
    }
    
    // 独立运行时
    if (!window.__POWERED_BY_QIANKUN__) {
      render();
    }
    
    export async function bootstrap() {
      console.log("[vue] vue app bootstraped");
    }
    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;
    }
    
    new Vue({
      router,
      render: (h) => h(App),
    }).$mount("#app-vue");

--------------------

**第三步，配置子应用跨域，，在你的子项目的vue.config.js文件，并添加如下代码**

const { name } = require("./package");
    module.exports = {
      devServer: {
        port: 8091, //子应用启动端口号，不可随意修改，与上文中父应用注册的子应用端口号对应
        headers: {
          "Access-Control-Allow-Origin": "*", //循序跨域
        },
      },
      configureWebpack: {
        output: {
          library: `${name}-[name]`,
          libraryTarget: "umd", // 把微应用打包成 umd 库格式
          jsonpFunction: `webpackJsonp_${name}`,
        },
      },
    };

--------------------

**第四步，在你的子项目配置路由，打开src/router文件夹下的index.js文件，将以下代码**

**将：**

const router = new VueRouter({
      routes,
    });

**修改为：**

const router = new VueRouter({
      // 这里和主应用中注册子应用时的activeRule对应
      base: window.__POWERED_BY_QIANKUN__ ? "/app-vue" : "/", 
      mode: "history",
      routes,
    });

--------------------

**第五步，修改app.vue和index.html中绑定的id，在你的子项目：**

<template>
      <div id="app-vue">我是子应用</div>
    </template>

#### 到这就完成了，我这里还遇到一个不大不小的问题： ####

> 子项目的样式有些错乱，检查后发现子项目的font-size继承了父项目的font-size,而父项目用了rem适配，处理的点是body和html的样式中设置font-size的值，解决了。

[0d4c77ba112546a4af0d91dfaf23faf6.gif]: https://img-blog.csdnimg.cn/0d4c77ba112546a4af0d91dfaf23faf6.gif
[qiankun - qiankun]: https://qiankun.umijs.org/zh/