微前端实战-乾坤

Posted 2022-12-06 yw00yw

主应用

安装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

   <!-- 这里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 库格式
    ,
  ,