子应用接入

一. 子应用工程

1. 在src目录下，创建 public-path.js 文件

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

2. 修改 package.json

"name": "子应用的名称" // 子应用的名称

3. 修改 vue.config.js

注意：运行时的 publicPath 和构建时的 publicPath 是不同的，两者不能等价替代。

const { name } = require('./package'); // package.json中的name

module.exports = {
    publicPath: process.env.NODE_ENV === 'development' ? '/' : '/子应用的根路径/', // 子应用的根路径
    runtimeCompiler: true,
    ...
    devServer: {
        headers: {
            'Access-Control-Allow-Origin': '*'
        },
      ...
    }
    configureWebpack: {
        // name: name,
        output: {
            library: `${name}-[name]`,
            libraryTarget: 'umd', // 把微应用打包成 umd 库格式
            jsonpFunction: `webpackJsonp_${name}`,
        },
        ...
      },
  ...
}

4. 修改 router/index.js

主应用的根路径是portal

import '@/public-path.js'
// import Hwork from 'hwork-web-component';
// const { Login, Layout } = Hwork;
const Layout = ({ template: '<router-view />' })

const createRouter = () =>
new Router({
    base: window.__POWERED_BY_QIANKUN__ ? '/portal/' : '/',
    ...
});

5. 修改 main.js

// import Hwork from 'hwork-web-component'
// const { initPermission } = Hwork
// initPermission(router, store)

let instance = null;
function render (props = {}) {
    const { container } = props;

    instance = new Vue({
        router,
        store,
        render: (h) => h(App)
    }).$mount(container ? container.querySelector('#app') : '#app');
}

// 非乾坤环境下，独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
    render();
}

export async function bootstrap () {
    console.log('[vue] vue app bootstraped');
}
export async function mount (props) {
    console.log('[vue] props from main framework', props);
    render(props);
}
export async function unmount () {
    instance.$destroy();
    instance.$el.innerHTML = '';
    instance = null;
    // router = null;
}

// new Vue({
//     el: '#app',
//     router,
//     store,
//     render: h => h(App)
// })