微前端实战-乾坤

Posted yw00yw

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微前端实战-乾坤相关的知识,希望对你有一定的参考价值。

主应用

安装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 库格式
    },
  },
}

以上是关于微前端实战-乾坤的主要内容,如果未能解决你的问题,请参考以下文章

乾坤实战教程

乾坤实战教程

微前端vue项目实战 -- 乾坤qiankun框架

微前端——乾坤qiankun Demo

微前端-乾坤

微前端-乾坤