阿里乾坤

记录使用乾坤遇到的一些问题

名称	作用	跨域
基座	Vue2	false
子应用1	Vue2	true
子应用2	React	true

跨域问题

基座组件不用跨域，但是子应用需要跨域，因为乾坤框架要通过fetch来联通基座和子应用；

注意：
1.vue2的跨域是写在webpack-dev-server里面的，而vue-cli-server开发的vue项目是配置在vue.config.js
里面，两个都是更改devServer；

2.乾坤的子应用需要配置打包路径（暂时不清楚有什么作用）,否则会报错；

//webpack.base.conf.js
module.exports = {
    devServer: {
        headers:{'Access-Control-Allow-Origin': '*'}
    },

    output: {
        path: config.build.assetsRoot,
        filename: '[name].js',
        publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
        
        //资源打包路径（必须有）
        library: 'vueApp',
        libraryTarget: 'umd'
    },
}

子应用页面不稳定

项目中第一次渲染子应用时，子应用的index.html的#app和基座的#app重名了，html中禁止id重复，它必须是唯一的。

//基座index.html
<div id="app"></div>

//子应用一index.html
//<div id="app"></div>之前子应用是这个样子的。
<div id="vueApp"></div>

//子应用二index.html
<div id="ReactApp"></div>

router问题

当子应用和基座都有router的时候，会导致子应用的window.vue使用的是基座的，需要将基座的window.vue改为window.vue2且delete window.vue

hash路由模式

当基座是history模式时，若要使用子应用的页面则子应用需要使用hash模式才能渲染出页面(不知道为什么,history就显示不出来)

基座main.js

//main.js 基座
const getActiveRule = (hash) => (location) => location.hash.startsWith(hash);
// 引入乾坤
import { registerMicroApps, start } from 'qiankun';
const apps = [
    {
        name: "myVueApp",
        entry: "//192.168.2.5:8084",
        container: "#vue1",
        //activeRule: ":tenant/main/vue",
        activeRule: getActiveRule("#/main/vue")
        props: { store }
    }
]

registerMicroApps(apps);
start({
    prefetch: false // 取消预加载
});// 开启

子应用main.js

let instance = null;
function render(props) {
    instance = new Vue({
        router,
        store,
        render: h => h(App),
    }).$mount('#vueApp')
}


if (window.__POWERED_BY_QIANKUN__) { // 动态添加publicPath
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

if (!window.__POWERED_BY_QIANKUN__) { // 默认独立运行
    render();
}

// 父应用加载子应用，子应用必须暴露三个接口：bootstrap、mount、unmount
export async function bootstrap(props) {

};

export async function mount(props) {
  props.onGlobalStateChange((state, prev) => {
  }, true);

  Vue.prototype.$onGlobalStateChange = props.onGlobalStateChange;
  Vue.prototype.$setGlobalState = props.setGlobalState;

  console.log(props)

  render(props);
}

export async function unmount(props) {
  instance.$destroy();
}

总结

因为项目比较大，具备医疗-工业-基本事务三大部分，拆分调试过程遇到很多问题，但是也学习了很多。我感觉乾坤就是一个比较稳定的iframe，能更好的理清应用之间的关系。因为数据传递还没打通，趁着时间没过多久，还有印象，就浅浅记录一下，防止之后忘记，重蹈覆辙！

001-阿里乾坤遇到的问题记录

阿里乾坤

总结