mdly

Appearance

使用微应用 ​

通过微前端方式接入的应用，融合效果更好。

提示

如果你使用的是 umi，可以直接使用官方的接入教程。详见 微前端 - 配置子应用

接入指南 ​

1、改造入口文件 ​

遵循 qiankun 官方文档改造入口文件。

警告

  1. 代码运行在沙箱，请避免动态插入JS代码；
  2. 使用CSS前缀，防止多应用共存出现样式冲突；

这里以 Vue cli >= 5.0 项目接入进行举例：

js
const { defineConfig } = require('@vue/cli-service');

module.exports = defineConfig({
  configureWebpack: {
    output: {
      library: '<your library name>',
      libraryTarget: 'umd',
      uniqueName: 'webpackJsonp_mediinfo_<your library name>',
    },
  },
  devServer: {
    allowedHosts: 'all',
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': '*',
      'Access-Control-Allow-Headers': '*',
    },
  },
});
js
// Note: 即使你没有什么要处理的，此函数也不能省略
export async function bootstrap() {
  // do something...
}

export async function mount(options) {
  // 在此实现
}

export async function unmount(options) {
  // do something...
}

if (window.__POWERED_BY_QIANKUN__) {
  // 修改变量，以修复构建资源加载问题
  // https://qiankun.umijs.org/zh/faq#%E4%B8%BA%E4%BB%80%E4%B9%88%E5%BE%AE%E5%BA%94%E7%94%A8%E5%8A%A0%E8%BD%BD%E7%9A%84%E8%B5%84%E6%BA%90%E4%BC%9A-404
  const resource = new URL(
    process.env.BASE_URL,
    window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__,
  );

  __webpack_public_path__ = resource.toString();
}

具体教程，详见 使用 Vue 框架。

2、解决样式冲突问题 ​

如果你的样式用如下方案，那么几乎不存在改造问题：

  1. 使用 css-in-js 技术；
  2. 采用 CSS 前缀方案，如：BEM 或其他；

如果你使用的是 .title 这种，那么就需要处理下兼容。

调试应用 ​

当你改造完毕，你可以：

  1. 在 Lyra 上配置应用与菜单，部署后运行； 请联系我司现场运维人员
  2. 可通过 浏览器插件 直接调试；

如有疑问或需要进一步的帮助，请随时联系我们的技术支持团队。