vue2.x使用qiankun.js搭建一个微前端测试环境

2023-12-24 18:34:16

前言

微服务在后端Java开发中，已经广泛应用，而且其概念已经趋于成熟，大家对微服务已经有了深入的了解。微前端的概念也出来很多年了，应用的普及程度远远不及微服务。最近，在网上看到，微前端已经有一些解决方案了，总结一下目前比较主流的几种微前端方案：

基座模式：主要基于路由分发，由一个基座应用监听路由，按照路由规则去加载不同的应用，以实现应用间解耦。
EMP：Webpack5 Module Federation，去中心化的微前端方案，可以在实现应用隔离的基础上，轻松实现应用间的资源共享和通信；

下面以基于 single-spa 的qiankun.js为例（也就是基座模式），具体实现一下微前端（基座和微应用是在不同文件夹的前端项目，不用建在一个文件夹下）：

本机环境

@vue/cli 4.5.13

搭建基座（主应用）

基于qiankun.js的微前端主要由主应用和若干个微应用组成。首先叙述一下基座的搭建

创建应用

# 创建基座项目，这里选的是vue2.x的项目
vue create vue-base

cd vue-base
#安装路由，默认创建项目不带路由，这里安装一下路由
npm install vue-router --save
# 安装微前端库
npm install qiankun --save

设置端口号（可以不设置，但是不能与其他微应用冲突），vue.config.js

'use strict'
module.exports = {
    devServer: {
        port: 8081  // 此处修改你想要的端口号，
    }
}

设置默认路由为history模式(不设置会影响后面的路由切换)，router/index.js

import Vue from 'vue'
import Router from 'vue-router'

import index from '../components/HelloWorld'

Vue.use(Router)
let router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: '首页',
      component: index
    }
  ]
})

export default router

修改main.js，注册微应用

import Vue from 'vue'
import App from './App.vue'
import router from './router'

import {registerMicroApps,setDefaultMountApp,start} from "qiankun";

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')
// 注册子应用
registerMicroApps([
  {
    name: 'vue app',			// 子应用名称
    entry: '//localhost:7101',	// 子应用入口
    container: '#container',	// 子应用所在容器
    activeRule: '/app-vue',			// 子应用触发规则（路径）
  },
  {
    name: 'bigScreen',			// 子应用名称
    entry: '//localhost:8080',	// 子应用入口
    container: '#container',	// 子应用所在容器
    activeRule: '/bigScreen',			// 子应用触发规则（路径）
  },
]);

// 启动默认应用
//setDefaultMountApp('/app-vue')

// 开启服务,配置项见官方文档
start()

App.vue添加容器

<template>
  <div id="app">
    <a href="/app-vue">app-vue</a>
    <br>
    <!-- 子应用 vue app -->
    <a href="/bigScreen">bigScreen</a>
    <!-- 主应用容器 -->
    <router-view></router-view>
    <!-- 子应用容器 -->
    <div id="container"></div>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {

  }
}
</script>

<style>

</style>

到这里，主服务就部署完毕了。注意，两个a标签是后面为测试跳转两个微应用设置的

搭建微应用

测试时，有两个微应用都是vue的（一个端口号8080，一个7101），这里我就只以一个为例，另外一个过程基本一致。

创建项目

# 创建微应用项目，这里选的是vue2.x的项目
vue create app-vue

cd app-vue
#安装路由，默认创建项目不带路由，这里安装一下路由
npm install vue-router --save

修改vue.config.js，主要是设置端口号、设置允许跨域（主应用跨域访问微应用）、设置打包模式（一定要设置）

'use strict'
const packageName = require('./package.json').name;


module.exports = {
    devServer: {
        port: 7101,  // 此处修改你想要的端口号，
        headers: {
            'Access-Control-Allow-Origin': '*' // 允许跨域
        }
    },
    configureWebpack: {
        output: {
            library: `${packageName}-[name]`,
            libraryTarget: 'umd', // 把微应用打包成 umd 库格式
            jsonpFunction: `webpackJsonp_${packageName}`,
        },
    },
}

src目录下创建public-path.js

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

注意，如果项目启用的Eslint，要在package.json中的eslintConfig中加上下面，不然编译不通过

 "globals": {
      "__webpack_public_path__": true
    },

创建路由，设置为history模式，base路径设置的与主应用的activeRule一致。router/index.js

import Vue from 'vue'
import Router from 'vue-router'

import HelloWorld from "../components/HelloWorld";


Vue.use(Router)
let router = new Router({
  mode: 'history',
  base: window.__POWERED_BY_QIANKUN__ ? '/app-vue/' : '/',
  routes: [
    {
      path: '/',
      name: '首页',
      component: HelloWorld
    },
  ]
})

export default router

HelloWorld.vue中简单写几个文字数据方便对比

<template>
  <div class="hello">
    <h1>vue-app</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

mian.js,与原来比，变化有点多

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


Vue.config.productionTip = false

let instance = null;
function render(props = {}) {
  const { container } = props;

  instance = new Vue({
    router,
    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;
}

测试使用

一个主应用，和两个微应用都是用npm run serve启动，首先访问主应用，如下：

点击app-vue

点击bigScreen

第二个应用样式有点问题，需要调整

总结

qiankun.js总体还是比较简单的，使用的效果也不错
但是搭建过程中还是遇到不少问题，官网说的也不是很清楚
总体还是有点类似于iframe的嵌套的，只是iframe换成了div
后续还有很多需要研究的

码农公寓

前言

本机环境

搭建基座（主应用）

搭建微应用

测试使用

总结

相关文章