微应用-qiankun-2

前言

上一篇我们把react子应用，嵌入了react主应用中，这篇我们把vue子应用嵌入到主应用中，整个页面再完善一下。

创建vue子应用

安装vue-cli

npm install -g @vue/cli

查看版本

vue -V

创建vue2应用

vue create micro-vue1 可以选择最简单的配置，不需要eslint等，选上babel router 就可以

设置本地服务端口

根目录创建.env文件设置PORT=8002

添加配置

src 目录下创建public-path.js

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

修改配置文件 vue.config.js

const { defineConfig } = require('@vue/cli-service');
const { name } = require('./package');
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
  configureWebpack: {
    output: {
      library: `${name}-[name]`,
      libraryTarget: 'umd', // 把微应用打包成 umd 库格式
      chunkLoadingGlobal: `webpackJsonp_${name}`,
    },
  }
})

main.js 添加生命周期

import "./public-path"
import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false



let instance
function render(props = {}) {
  instance=new Vue({
    router,
    render: h => h(App)
  }).$mount('#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;
}

到这里子应用的配置已经完成，接下来我们来更新主应用的入口

主应用修改

主应用 index.js 中添加 vue 子应用配置项

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { registerMicroApps, start } from 'qiankun';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

registerMicroApps([
  {
    name: 'micro-react1', // 子应用名称，尽量和子应用package.json name 一致
    entry: '//localhost:8001', //子应用端口
    container: '#reactContainer', //子应用渲染节点
    activeRule: '/reactActiveRule', //路由监听，如果进入该路由，则渲染子应用
  },
  {
    name: 'micro-vue1', // 子应用名称，尽量和子应用package.json name 一致
    entry: '//localhost:8002', //子应用端口
    container: '#vueContainer', //子应用渲染节点
    activeRule: '/vueActiveRule', //路由监听，如果进入该路由，则渲染子应用
  }
]);

start();

在 app.js 中添加出口配置

function App() {
  return (
    <div className="App">
      我是主应用
      {/* 子应用渲染节点 */}
      <div id="reactContainer"></div>
      <div id="vueContainer"></div>
    </div>
  );
}
export default App;

将三个项目都运行起来 分别是80（主） 81（react） 82(vue) 三个端口

此时我们已经将两个字应用都配置完成。

创建vue3子应用

用vue-cli 配置vue3 与2 没有什么差别，需要注意一点的是如果先起了服务 配置完 vue.config.js 需要把项目再重启一下，不然那会报跨域问题！

一键启动所有服务

现在已经配置好了三个子应用，但是发现每次需要把服务都启动起来，比较麻烦，我们可以通过一个命令启动所有的服务。 在根目录安装插件，感兴趣的小伙伴可以去了解一下
npm i concurrently --save-dev

 {
  "devDependencies": {
    "concurrently": "^8.2.1"
  },
  "scripts": {
    "all": "concurrently \"cd micro-main-app && npm start \" \"cd micro-react && npm start\" \"cd micro-vue2x && npm run serve\" \"cd micro-vue3x && npm run serve\" ",
    "dev:man":"cd micro-main-app && npm start",
    "dev:react":"cd micro-react && npm start",
    "dev:vue2":"cd micro-vue2x && npm run serve",
    "dev:vue3":"cd micro-vue3x && npm run serve"
  }
}

通过 npm run all 一键运行多个服务

最后

本篇我们把vue2 ,vue2通过cli脚手架配置为子应用，并实现了一键运行多个服务。下篇我们对这个项目继续完善！