集成乾坤微前端主應(yīng)用：

1.安裝

npm i qiankun -S
qiankun文檔官方地址：https://qiankun.umijs.org/zh/guide

2.main.js中進行配置

import {registerMicroApps, start} from 'qiankun';
Vue.config.productionTip = false;
registerMicroApps([
{
    name: 'test-web', // app name registered
    entry: 'http://localhost:8081/', //項目地址
    container: '#test-web',//加載組件的控件id
    activeRule: '/test_web',
    sanbox: true //解決css沖突
  },
]);
//開啟樣式 主子應(yīng)用樣式隔離
start({sandbox: {experimentalStyleIsolation: true}});

3.配置路由

新建一個.vue文件

<template>
//此處id與container保持一致
<div id="test-web"></div>
</template>

配置路由地址文章來源地址http://www.zghlxwxcb.cn/news/detail-447774.html

{
        path: '/test-web/*',
        name: 'test-web',
        component: () => import('@/views/test-web')
      },

4.將主應(yīng)用路由模式設(shè)置為history模式

子應(yīng)用中配置（子應(yīng)用無需安裝乾坤）

1.在src目錄下增加public-path.js文件

if (window.__POWERED_BY_QIANKUN__) {
   // eslint-disable-next-line no-undef
   __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
 }

2.在main.js中寫入生命周期函數(shù)

//引入public-path.js
import "./public-path";

 let instance = null;
 function render(props = {}) {
   const {container} = props;
   console.log(11111111111111, window.__POWERED_BY_QIANKUN__, '字段值')
   instance = new Vue({
     router,
     store,
     render: h => h(App),
   }).$mount(container ? container.querySelector('#app') : '#app', true); //開啟沙箱
 }
 
 if (!window.__POWERED_BY_QIANKUN__) {
   console.log('獨立運行')
   render();
 }
 
 
 function storeTest(props) {
   props.onGlobalStateChange &&
   props.onGlobalStateChange(
     (value, prev) => console.log(`[onGlobalStateChange - ${props.name}]:`, value, prev),
     true,
   );
   props.setGlobalState &&
   props.setGlobalState({
     ignore: props.name,
     user: {
       name: props.name,
     },
   });
 }
 
 
 export async function bootstrap() {
   console.log('111111111111 [vue] vue app bootstraped');
 }
 
 export async function mount(props) {
   console.log('11111111111 [vue] props from main framework', props);
   storeTest(props);
   render(props);
 }
 
 export async function unmount() {
   instance.$destroy();
   instance.$el.innerHTML = '';
   instance = null;
 }

3.在vue.config.js里面進行配置

 const {name} = require('./package');
 module.exports = {
   devServer: {
     headers: {
       'Access-Control-Allow-Origin': '*',
     },
   },
   // 自定義webpack配置
   configureWebpack: {
     output: {
       // 把子應(yīng)用打包成 umd 庫格式
       library: `${name}-[name]`,
       libraryTarget: 'umd',
       //腳手架5.0  jsonpFunction 改為 chunkLoadingGlobal
       jsonpFunction: `webpackJsonp_${name}`,
     },
   },
 }

4.修改router配置

 const routerConfig = {
   base: window.__POWERED_BY_QIANKUN__ ? '/test-web/' : '/',
   routes: []
 }

5.檢查package.json中的name是否與主應(yīng)用中注冊的name一致

6.重啟子應(yīng)用，進行跳轉(zhuǎn)

到了這里，關(guān)于vue項目集成乾坤(qiankun)微前端的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！