记录第一次用微前端qiankun 基座是vue2 子应用也是vue2

lcy_132056117

已于 2023-07-12 14:36:24 修改

阅读量318

点赞数 1

文章标签：前端 vue.js javascript

于 2023-06-21 13:37:03 首次发布

本文链接：https://blog.csdn.net/qq_15236153/article/details/131323325

版权

首先给出qiankun官网链接: https://qiankun.umijs.org/zh

1.主应用

1.1前置

1.1.1

首先路由模式建议要用history模式(微应用也是!!!)
在这里插入图片描述

然后把路由懒加载的路径注释掉,因为点击路由跳转的时候需要去微应用中去寻找

mode:'history',

在这里插入图片描述
主应用端口号为 8080(下面例子中微应用端口为8081)

1.1.2

在vue文件中页面展示的地方,平常写路由占位的地方同级下面写

<router-view />
<div id="sub-app"></div>

在这里插入图片描述

1.2安装qiankun

npm i qiankun -S   //只需要主应用中安装,微应用中无需安装

1.3注册微应用并启动

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'sub-vue2',
    entry: '//localhost:8081',
    container: '#container',//容器
    activeRule: '/sub-vue2',
  },
]);
// 启动 qiankun
start();

2.微应用(也是vue2)

根据官网给的示例来进行
https://qiankun.umijs.org/zh/guide/tutorial#vue-%E5%BE%AE%E5%BA%94%E7%94%A8

2.1在 src 目录新增 public-path.js

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

2.2入口文件 main.js 修改

// new Vue({
//   router,
//   store,
//   i18n,
//   render: (h) => h(App),
// }).$mount("#app");


import VueRouter from 'vue-router';

import routes from './router/routes';


let router = null;
let instance = null;
function render(props = {}) {
  const { container } = props;
  router = new VueRouter({
    base: window.__POWERED_BY_QIANKUN__ ? '/sub-vue2/' : '/',
    mode: 'history',
    routes,
  });

  instance = new Vue({
    router,
    store,
    render: (h) => h(App),
  }).$mount(container ? container.querySelector('#app') : '#app');
}

// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

export async function bootstrap() {
  console.log('[vue] vue app bootstraped');
}
export async function mount(props) {
  console.log('[vue] props from main framework', props);
  render(props);
}
export async function unmount() {
  instance.$destroy();
  instance.$el.innerHTML = '';
  instance = null;
  router = null;
}

在这里插入图片描述

2.3修改vue.config.js文件

devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
    port: 8081,
  },
  
configureWebpack: {
	output: {
	      library: `sub-vue2`,
	      libraryTarget: 'umd', // 把微应用打包成 umd 库格式
	      jsonpFunction: `webpackJsonp_sub-vue2`,
	    },
    }

在这里插入图片描述