一 主應(yīng)用改造（又稱基座改造）

1 在主應(yīng)用中安裝qiankun(npm i qiankun -S)

?2 在src下新建micro-app.js文件，用于存放所有子應(yīng)用。

const microApps = [
  // 當(dāng)匹配到activeRule 的時(shí)候，請(qǐng)求獲取entry資源，渲染到container中
  {
    name: 'micro-vue3',
    entry: '//localhost:40000',// 子應(yīng)用的html入口
    activeRule: '/vue1', // 路由匹配規(guī)則
    container: '#micro-vue3', // 渲染到哪里
    props: {},
  },
];

export default microApps;

?3 改造vue.config.js，允許跨域訪問子應(yīng)用頁(yè)面

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 8000,
    headers: {
      // 重點(diǎn)1: 允許跨域訪問子應(yīng)用頁(yè)面
      'Access-Control-Allow-Origin': '*',
    },
  },
})

?4 改造main.js

?文章來源地址http://www.zghlxwxcb.cn/news/detail-644368.html

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/router';
import ElementPlus from 'element-plus'; //element-plus
import 'element-plus/dist/index.css'; //element-plus
import { registerMicroApps, start } from 'qiankun';
import microApps from './micro-app';
// createApp(App).use(router).use(ElementPlus).mount('#app');
let app = createApp(App);
app.use(router);
app.use(ElementPlus);
app.mount('#app');

// 注冊(cè)子應(yīng)用
registerMicroApps(microApps, {
  //還有一些生命周期 如果需要可以根據(jù)官網(wǎng)文檔按需加入
  beforeMount(app) {
    console.log('掛載前', app);
  },
  afterMount(app) {
    console.log('卸載后', app);
  },
});
console.log("hello 主應(yīng)用")
// 啟動(dòng)子應(yīng)用
start({
  prefetch: false, //取消預(yù)加載
  sandbox: { experimentalStyleIsolation: true }, //沙盒模式
});

5 在App.vue中寫響應(yīng)跳轉(zhuǎn)子應(yīng)用（根據(jù)自己的項(xiàng)目找對(duì)應(yīng)位置寫，不局限于App.vue）

?

<template>
  <el-menu :router="true" mode="horizontal">
    <!-- 子應(yīng)用的跳轉(zhuǎn)路徑 -->
    <el-menu-item index="/index">主應(yīng)用 main</el-menu-item>
    <el-menu-item index="/vue1">子應(yīng)用 vue3</el-menu-item>
  </el-menu>
  <!-- 主應(yīng)用路由渲染出口 -->
  <router-view />
  <!-- 子應(yīng)用的容器 -->
  <!-- 微前端子應(yīng)用渲染出口 -->
  <div id="micro-vue3"></div>
</template>

<script>
export default {
  name: 'App',
  setup() {
    return {};
  },
};
</script>

<style>
html,
body,
#app {
  width: 100%;
  height: 100%;
  margin: 0;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
</style>

需要注意這里的對(duì)應(yīng)關(guān)系：

?二 子應(yīng)用改造

1 在src下新建public-path.js

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

2 改造main

?

import { createApp } from 'vue'
import App from './App.vue'
import './public-path'; // 注意需要引入public-path
// createApp(App).mount('#app')
let instance = null;
console.log("hello 子應(yīng)用")
function render({ container } = {}) {
  instance = createApp(App);
  // instance.use(router);
  // instance.use(store);
  instance.mount(container ? container.querySelector('#app2') : '#app2');
}
// 如何獨(dú)立運(yùn)行微應(yīng)用？
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}
// 子應(yīng)用接入 qiankun
//  1 導(dǎo)出三個(gè)必要的生命周期鉤子函數(shù)
// bootstrap 渲染之前
// mount 渲染函數(shù)
// unmount 卸載函數(shù)
export async function bootstrap() {
  // 啟動(dòng)
  console.log("啟動(dòng)")
}
export async function mount() {
  console.log("掛載")
  // 掛載
  render();
}
export async function unmount() {
  // 例如從一個(gè)子應(yīng)用到另一個(gè)子應(yīng)用 需要先卸載后再加載，防止內(nèi)存泄露
  console.log("卸載")
  // 卸載
  instance.unmount();
  instance = null; 

  // instance.$destroy();
  // instance.$el.innerHTML = ''
  // instance = null
}

3 改造vue.config.js

const { defineConfig } = require('@vue/cli-service')
const { name } = require('./package');
console.log("hello 子應(yīng)用")
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 40000,
    headers: {
      'Access-Control-Allow-Origin': '*', //開發(fā)時(shí)增加跨域 表示所有人都可以訪問我的服務(wù)器
    },
  },
  configureWebpack: {
    output: {
      // 必須打包出一個(gè)庫(kù)文件
      library: `${name}-[name]`,
      // 庫(kù)格式必須是 umd
      libraryTarget: 'umd', // 把子應(yīng)用打包成 umd 庫(kù)格式
      // jsonpFunction: `webpackJsonp_${name}`,
      chunkLoadingGlobal: `webpackJsonp_${name}`,
    },
  },
})

?三 改造后效果

?

?

到了這里，關(guān)于基于vue3+webpack5+qiankun實(shí)現(xiàn)微前端的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！