qiankunjs，微前端，原理及功能就不再赘述，网上一搜一大堆，这篇帖子是为了记录一下使用过程中遇到的问题及解决办法

项目描述

主应用：vue2，vue-cli搭建

微应用：目前只有一个，技术栈为17版本的react，CRA搭建

问题

1. less的使用

cra内置对scss的支持但是项目中使用的是less，所以需要进行less的扩展，需要修改项目的打包配置，在不打碎项目的前提下就需要使用到 react-app-rewired，但是不生效，所以选择使用 craco，可以通过 插件 craco-less 的方式进行less的处理，不需要本地自主安装相应loader包（避免自主安装的包版本过高或者过低）

craco配置：

module.exports = {
    plugins: [{
        plugin: CracoLessPlugin
    }],
    eslint: {
        enable: false
    },
    typescript: {
        enableTypeChecking: false
    },
    webpack: {
        configure: (config) => {
            //针对qiankun的配置
            config.output.library = `sub-react`;
            config.output.libraryTarget = 'umd';
            config.output.chunkLoadingGlobal = `webpackJsonp_${name}`;
            config.module.rules = config.module.rules.concat(customRules);
            return config;
        }
    },
    devServer: (devServerConfig, {proxy}) => {
        //qiankun配置，跨域策略
        devServerConfig.open = false;
        devServerConfig.hot = false;
        devServerConfig.headers = {
            'Access-Control-Allow-Origin': '*',
        };
        // Return your customised Webpack Development Server config.
        return devServerConfig;
    }
};

2. 本地开发代理

问题描述：微应用中需要连着测试环境进行开发，但是在devser中配置了代理之后不生效，原因是主应用和微应用之间域名不一致，需要在主应用中配置微应用的域名代理

3. 主应用路由页面加载子应用，子应用使用了styled-component库，切到主应用的页面再切回来子页面，子页面样式混乱问题

原因是切到其他主页面后，挂载子应用的容器被销毁，再次进入容器页面，动态css异步加载，导致动态的样式丢失解决办法，将挂载容器持久化在页面中将挂载容器写在根节点中，保证不销毁，然后通过样式控制容器的位置

4. 其他问题

剩下的问题主要就是一些资源找不到，加上对应的loader就好了，比如字体ttf

结语

目前就这些，后续的问题也会进行记录

qiankunjs踩坑实录（持续记录）