微前端改造

主应用

 

子应用

参考项目（但只有部分改造）

package.js

"cw_oauth_library": "0.1.17",  //  改为"0.1.15"，高版本有问题

添加qiankun

// 命令行
npm i qiankun -S --legacy-peer-deps  // 安装乾坤
npm i --legacy-peer-deps  //安装依赖

babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  compact: false, // yarn build打包文件过大
}

vue.config.js

// 替换文件
const path = require('path');
const packageName = require('./package.json').name;
module.exports = {
    configureWebpack: {
        output: {
            library: `${packageName}-[name]`,
            libraryTarget: 'umd',
            jsonpFunction: `webpackJsonp_${packageName}`,
        },
    },
    lintOnSave: false,
    runtimeCompiler: true,
    devServer: {
        port: 8810,
        headers: {
            'Access-Control-Allow-Origin': '*',
        },  // 跨域处理
        proxy: {
            '/assets': {
                target: 'http://localhost:8080',
                changeOrigin: true,
                autoRewrite: true,
            },
            '/api': {
                target: 'http://localhost:8080',
                changeOrigin: true,
                autoRewrite: true,
            },
            '/rest': {
                target: 'http://localhost:8080',
                changeOrigin: true,
                autoRewrite: true,
            },
            '^/gateway/': {
                target: 'http://localhost:8080',
                changeOrigin: true,
                autoRewrite: true,
            },
            '^/gw/sysfomp/': {
                target: `http://t-sy.cofco-fintech.com:26447/api/credit`,
                changeOrigin: true,
            }, // devServer本地代理
            '^/upload': {
                target: 'http://localhost:8080',
                changeOrigin: true,
                autoRewrite: true,
            },
        },
    },
};

public-path.js

src下添加文件

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

main.js

直接替换

import metaData from './metaData.js';
import './public-path';     
import platformConfig from './platform.config.json';
import { routes } from './router/routes';
import './library';
import cloudAdminDesigner from './init';


if(!window.__POWERED_BY_QIANKUN__) {
    cloudAdminDesigner.init(platformConfig?.appConfig, platformConfig, routes, metaData);
}
export async function bootstrap() {
    console.log('react app bootstraped');
}
export async function mount(props) {
    cloudAdminDesigner.init(platformConfig?.appConfig, platformConfig, routes, metaData);
}


export async function unmount(props) {
}


export async function update(props) {
    console.log('update props', props);
}

/public/index.html

<div id="app"></div> // 换成<div id="micor-app"></div>

src/init.js

} else app.$mount('#app') // 换成 } else app.$mount('#micor-app')

library.js

注释29行

// (Vue || window.Vue).directive("feAnnotation", feAnnotation);

setConfig.js

// options.baseURL = 'https://some-domain.com/api' // 换成options.baseURL = '/';

src/router/init.js

新（添加是否被qiankun接入判断）

export function createRouter({ routes, VueRouter }) {
    return new VueRouter({
        mode: 'history',
        base: !window.__POWERED_BY_QIANKUN__ ? (window.LcapMicro?.routePrefix || process.env.BASE_URL) : '/sfomp' + (window.LcapMicro?.routePrefix || process.env.BASE_URL),
        routes,
    });
}

旧

export function createRouter({ routes, VueRouter }) {
    return new VueRouter({
        mode: 'history',
        base: window.LcapMicro?.routePrefix || process.env.BASE_URL,
        routes,
    });
}