# 概述

该使用手册，将会介绍如何将开放文档集成到项目中。其中集成技术主要是借助了 qiankun 框架，感兴趣的同学可以查看其官方文档：https://qiankun.umijs.org/zh/guide 。不想细研究的同学，也可以直接根据以下步骤，进行快速开发。下面会以 vue-cli 搭建的项目为例，其他技术栈的使用类似。
开放文档可单独访问，这里以 https://demo.fizzgate.com/module/open-document/index.html?id=1437635360536920065为例进行说明 。亦可通过顶部菜单的 "文档演示" 进行效果查看。

# 前端开发操作步骤

1、主应用安装 qiankun 依赖

yarn add qiankun

2、修改主应用的webpack配置。这里以 vue-cli 生成的项目为例，修改 vue.config.js 文件的 devServer 配置
（1）设置请求头跨域
（2）设置 开放文档 的代理访问地址
（3）设置 开放文档 的 接口访问地址

devServer: {
    // port: 9527,
    headers: {
        "Access-Control-Allow-Origin": "*"
    },
    proxy: {
        '/module/': {
            target: 'https://demo.fizzgate.com',
            changeOrigin: true
        },
        '/api': {
            target: 'https://demo.fizzgate.com/api',
            ws: true,
            changeOrigin: true,
            pathRewrite: {
                '^/api': '/'
            }
        }
    }
}

3、主应用加载 开放文档

（1）设置一个容器，用于放置 开放文档 微前端应用

<div class="micro" id="micro"></div>

若想在微应用加载过程中，显示自定义加载动画，可以在micro容器内部放一个loading组件，如：

<div class="micro" id="micro"><Loading /></div>

（2）在 mounted 钩子函数里手动加载 开放文档 微应用，在 beforeDestroy 钩子函数里进行微应用卸载
注意：props中的documentId 为地址 "https://demo.fizzgate.com/module/open-document/index.html?id=1437635360536920065" 中的 id 值。

import { loadMicroApp } from "qiankun";

export default {
  data() {
    return {
      app: null
    };
  },
  methods: {
    loadApp(loadMicroApp) {
      this.app = loadMicroApp({
        name: "openDocument", // 唯一标识
        entry: "/module/open-document/index.html",  // 访问地址
        container: "#micro",  // 挂载元素
        props: {
          documentId: '1437635360536920065'  // 传入文档集id
        }
      });
    },
  },
  mounted() {
    this.loadApp()
  },
  beforeDestroy() {
    this.app.unmount();
  }
};

4、根据需要，也可预先加载微应用

import { prefetchApps } from 'qiankun';

prefetchApps([
  { name: 'openDocument', entry: "/module/open-document/index.html" }
]);

5、主应用加载了开放文档微应用后，可能会存在样式污染问题（由于qiankun的css沙箱采用了非严格模式）。开发者可根据需要进行微调。

# 部署

1、若部署时候使用 nginx 代理，建议增加以下配置：

server {
    gzip on; 
    gzip_static on; 
    gzip_buffers 4 16k;
    gzip_http_version 1.1;
    gzip_comp_level 5;
    gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_disable "MSIE [1-6]\.";
    gzip_vary on;  
    location ^~ /module/ {
        add_header Access-Control-Allow-Origin *;
        proxy_pass https://demo.fizzgate.com/module/;
    }
    location ^~ /api {
        rewrite ^/api/(.*) /$1 break;
        proxy_pass https://demo.fizzgate.com;
    }
}

2、修改完配置后，重启 nginx 便可。

← 运维相关 →