qiankun

創建主應用項目——vue2

1. main.js注冊子應用

$ yarn add qiankun # 或者 npm i qiankun -S

import { registerMicroApps, start } from 'qiankun';
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "lib-flexible";import { Button } from "vant";
Vue.use(Button);Vue.config.productionTip = false;
// 注冊子應用
registerMicroApps([{name: 'vueApp',entry: '//localhost:8081',container: '#container',activeRule: '/app-a',},{name: 'vueApp1',entry: '//localhost:8082',container: '#container',activeRule: '/app-b',}
]);// 啟動 Qiankun
start();
import service from "./utils/request";
Vue.prototype.$axios = service;
new Vue({router,store,render: (h) => h(App),
}).$mount("#app");

2. 創建子應用容器
   
   3.路由history模式
   
   4.首頁跳轉鏈接

<template><div><h1>主應用門戶頁面</h1><router-link to="/app-a">前往子應用 A</router-link><br /><router-link to="/app-b">前往子應用 B</router-link></div>
</template>

子應用 app-a

1. 在 src 目錄新增 public-path.js

== bug：下面注釋不能刪掉，否則會報錯 ==

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

2. 入口文件 main.js 修改

import './public-path';
import Vue from "vue";
import App from "./App.vue";
import VueRouter from 'vue-router';
import { routes } from "./router/index";
import store from "./store";
import "lib-flexible";import { Button } from "vant";
Vue.use(Button);Vue.config.productionTip = false;let router = null;
let instance = null;
function render(props = {}) {const { container } = props;router = new VueRouter({base: window.__POWERED_BY_QIANKUN__ ? '/app-a/' : '/', // 注意這里的路由需要和主應用的注冊路由一致mode: 'history',routes,});instance = new Vue({router,store,render: (h) => h(App),}).$mount(container ? container.querySelector('#app') : '#app');
}export async function bootstrap() {console.log('[vue] vue app bootstraped');
}
export async function mount(props) {console.log(11111111, 'app-a mount', props);render(props);
}
export async function unmount() {instance.$destroy();instance.$el.innerHTML = '';instance = null;router = null;console.log(11111111, 'app-a unmount');
}
import service from "./utils/request";
Vue.prototype.$axios = service;// 獨立運行時
if (!window.__POWERED_BY_QIANKUN__) {render();
}

3. 路由文件，注意導出 路由數組routes 和 路由實例 router

import Vue from "vue";
import VueRouter from "vue-router";
import home from "../views/home/index.vue";Vue.use(VueRouter);export const routes = [{path: "/",name: "home",component: home,},{path: "/course",name: "course",component: () => import("../views/course/index.vue"),},
];const router = new VueRouter({mode: 'history',routes,
});export default router;
Vue.use(VueRouter);

4. 打包配置修改（vue.config.js）

const { defineConfig } = require("@vue/cli-service");
const { name } = require('./package');
module.exports = defineConfig({devServer: {headers: {'Access-Control-Allow-Origin': '*',},proxy: {//配置跨域"/stage-api": {target: "http://192.168.0.19:8801", //這里后臺的地址模擬的;應該填寫你們真實的后臺接口changOrigin: true, //允許跨域pathRewrite: {/* 重寫路徑，當我們在瀏覽器中看到請求的地址為：http://localhost:8080/api/core/getData/userInfo 時實際上訪問的地址是：http://121.121.67.254:8185/core/getData/userInfo,因為重寫了 /api*/"^/stage-api": "/",},},},},configureWebpack: {output: {library: `${name}-[name]`,libraryTarget: 'umd', // 把微應用打包成 umd 庫格式chunkLoadingGlobal: `webpackJsonp_${name}`, // webpack 5 需要把 jsonpFunction 替換成 chunkLoadingGlobal},},
});