当前位置：首页 > article >正文

无星的微前端之旅（四）——qiankun线上服务代理到本地

article 2024/12/3 1:12:03

这个方式其实是我在上家公司的时候体验过，觉得确实很有意思。

所以这里来逆推一下实现方式。

解决了什么痛点

1.开发一个模块，需要启动2-3个项目

在微前端的开发过程中，如果我们要在主应用中看效果，我们至少需要启动一个主应用，和一个待开发模块，如果项目具有登陆机制，我们还需要启动一个登陆模块。

换句话说，为了开发一个模块，我们需要至少启动三个项目。

2.数据耦合的情况下，无法单独启动项目调试

3.特定环境下出现的bug

可能某些bug依赖特定的数据，在测试环境出现了但在本地运行或开发环境运行正常。

如何解决

在成功发布一个版本以后，配置需要在特定条件下触发加载的本地模块，从而将线上服务的某些模块，代理到本地启动的模块，进行开发调试。

如何实现

前面几篇讲到，注册的配置信息其实是可以从远端拉取的，那么只需要有一个配置的地方，我们就可以动态修改这个配置列表。

换句话说，我们可以通过一些代码，配合需要配置列表，进行代理。

1.预设特定条件

比如我们预设一个特定条件：

环境为development或beta环境

且

成功读取远程配置列表

且

浏览器localStorage中存在名为developer的值

2.使用可热更新读取的配置表，例如nacos提供

举个例子：
构造一个对象，key表示开发者名字，value为需要代理到本地的数组，item的name为代理模块名称，entry表示入口地址，填写本地的运行地址就行。

// 远程需要读取的配置项
{
  xingwu:[{
    name:'sub-login',
    entry:'//localhost:3002'
  }]
}

3.修改主应用代码

3.2 main.js

改造前

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
// 注册
import register from './micro/index';
// 添加全局通信
import '@/micro/store';

createApp(App).use(store).use(router).mount('#app');
// 注册
register();

改造后

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import api from './api';
// 注册
import register from './micro/index';
// 添加全局通信
import '@/micro/store';

createApp(App).use(store).use(router).mount('#app');
// 注册
// 获取远端开发者
const isDevelopment = () => process.env.VUE_APP_ENV_CONFIG === 'development' || process.env.VUE_APP_ENV_CONFIG === 'beta';
if (isDevelopment) {
  // 网络请求获取远端配置
  api.getDeveloper().then((response) => {
    window.subApps = response;
  }).finally(() => {
    register();
  });
} else {
  register();
}

改造需要的注意点就是注册时机

1.判断环境是否是development环境或beta环境。

这个可以根据配置.env文件中的环境变量属性，在不同环境执行不同mode打包做到。

2.如果加载成功，把加载好的结果存起来。

3.如果加载失败，也得继续注册，不然页面直接挂了。

3.2 subapps

改造前：

import router from '@/router/index';
// 此时在开发，测试环境，理论上已经挂载了subapps的入口
const baseUrl = process.env.BASE_URL;

const subapps = [
  {
    name: 'sub-login',
    entry: process.env.VUE_APP_SUB_LOGIN,
    container: '#sub-apps',
    activeRule: `${baseUrl}sub-login`,
    props: {
      routeBasePath: '/sub-login',
      mainRouter: router,
    },
  },
  {
    name: 'sub-user-manage',
    entry: process.env.VUE_APP_SUB_USER_MANAGE,
    container: '#sub-apps',
    activeRule: `${baseUrl}sub-user-manage`,
    props: {
      routeBasePath: '/sub-user-manage',
      mainRouter: router,
    },
  },
];

export default subapps;

改造后：

import router from '@/router/index';
// 此时在开发，测试环境，理论上已经挂载了subapps的入口
const baseUrl = process.env.BASE_URL;

const subapps = [
  {
    name: 'sub-login',
    entry: process.env.VUE_APP_SUB_LOGIN,
    container: '#sub-apps',
    activeRule: `${baseUrl}sub-login`,
    props: {
      routeBasePath: '/sub-login',
      mainRouter: router,
    },
  },
  {
    name: 'sub-user-manage',
    entry: process.env.VUE_APP_SUB_USER_MANAGE,
    container: '#sub-apps',
    activeRule: `${baseUrl}sub-user-manage`,
    props: {
      routeBasePath: '/sub-user-manage',
      mainRouter: router,
    },
  },
];

// 判断本地是否存在developer
const developer = localStorage.getItem('developer');
if (window.subApps && developer) {
  // 获取远端定义的入口
  const tmpArray = window.subApps[developer];
  if (tmpArray) {
    tmpArray.forEach((item) => {
      subapps.forEach((app) => {
        if (app.name === item.name) {
          app.entry = item.entry;
        }
      });
    });
  }
}
export default subapps;

比如上面，我在远端定义了一个开发者xingwu

我只需要再在浏览器的localStorage手动添加一个developer:xingwu

就可以触发匹配，将我指定的模块，加载本地启动的模块，代理到本地。

而其他所有用户所有模块，均不受影响。

就这样，完美解决了上面提出的痛点。

最后给大家看一下效果。