微前端实战-乾坤

「爱情、让人受尽委屈。」 2022-08-30 05:28 163阅读 0赞

## 主应用 ##

#### 安装qiankun ####

*  `yarn add qiankun # 或者 npm i qiankun -S`

#### main.js ####

import Vue from "vue";
    import App from "./App.vue";
    import router from "./router";
    import store from "./store";
    
    Vue.config.productionTip = false;
    
    import {  registerMicroApps, start } from 'qiankun';
    
    registerMicroApps([
      { 
        name: "vueApp",
        entry: "//localhost:30001",
        container: "#vue",
        activeRule: "/vue",
        props: { 
          params: 111
        }
      },
    ]);
    
    start({ 
      prefetch: false
    });
    
    
    new Vue({ 
      router,
      store,
      render: (h) => h(App),
    }).$mount("#app");

#### 需要注意的事项 ####

1.  路由hash模式改成history
    
        const router = new VueRouter({ 
          mode: 'history',
          routes,
        });
2.  app.vue中的id需要删除或者更改，不能是app
    
        
        <div id="appmain">
          <div id="nav">
            
            <router-link to="/">主应用</router-link> |
            
            <router-link to="/vue">子应用</router-link>
          </div>
          <router-view />
          <div id="vue"></div>
        </div>

## 子应用 ##

#### main.js ####

import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'
    
    Vue.config.productionTip = false
    
    let instance = null;
    function render() { 
      instance = new Vue({ 
        router,
        store,
        render: h => h(App)
      }).$mount('#app')
    }
    
    if (window.__POWERED_BY_QIANKUN__) { 
      __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
    }
    
    // 独立运行时
    if (!window.__POWERED_BY_QIANKUN__) { 
      render();
    }
    
    export async function bootstrap() { }
    
    export async function mount(props) { 
      console.log(props);
      render(props);
    }
    
    export async function unmount() {  
      instance.$destroy();
    }

## 路由改成history ##

const router = new VueRouter({ 
      mode: 'history',
      base: '/vue',
      routes
    })

## vue.config.js ##

module.exports = { 
      devServer: { 
        port: 30001,
        headers: { 
          'Access-Control-Allow-Origin': '*',
        },
      },
      configureWebpack: { 
        output: { 
          library: `vueApp`,
          libraryTarget: 'umd', // 把微应用打包成 umd 库格式
        },
      },
    }