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

前言

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

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

下面以基于 single-spaqiankun.js为例(也就是基座模式),具体实现一下微前端(基座和微应用是在不同文件夹的前端项目,不用建在一个文件夹下):

本机环境

  • @vue/cli 4.5.13

搭建基座(主应用)

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

  1. 创建应用
# 创建基座项目,这里选的是vue2.x的项目
vue create vue-base

cd vue-base
#安装路由,默认创建项目不带路由,这里安装一下路由
npm install vue-router --save
# 安装微前端库
npm install qiankun --save
  1. 设置端口号(可以不设置,但是不能与其他微应用冲突),vue.config.js
'use strict'
module.exports = {
    devServer: {
        port: 8081  // 此处修改你想要的端口号,
    }
}
  1. 设置默认路由为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
  1. 修改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()
  1. 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),这里我就只以一个为例,另外一个过程基本一致。

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

cd app-vue
#安装路由,默认创建项目不带路由,这里安装一下路由
npm install vue-router --save
  1. 修改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}`,
        },
    },
}
  1. 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
    },
  1. 创建路由,设置为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
  1. 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>
  1. 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启动,首先访问主应用,如下:
vue2.x使用qiankun.js搭建一个微前端测试环境

点击app-vue
vue2.x使用qiankun.js搭建一个微前端测试环境

点击bigScreen
vue2.x使用qiankun.js搭建一个微前端测试环境
第二个应用样式有点问题,需要调整

总结

  1. qiankun.js总体还是比较简单的,使用的效果也不错
  2. 但是搭建过程中还是遇到不少问题,官网说的也不是很清楚
  3. 总体还是有点类似于iframe的嵌套的,只是iframe换成了div
  4. 后续还有很多需要研究的
上一篇:Vue2笔记(一)


下一篇:GoGoCode工具让Vue2升级到Vue3更轻松