前言
前两天用了一下微前端框架 icestark, 在实际架构搭建过程中发现中发现在 Vue 主应用子应用之间切换 tag （tag 分别主应用和子应用的页面）页签时会有子应用数据状态无法保存的情况，搜索了一波解决方案后发现，icestark 中 React 应用实现了对数据状态的缓存，Vue 里面没有这个实现。
React 实现的思路是通过 Tabs 组件结合 icestark 实现的一种机制，但是没有用到路由。由于架构时间有限，发现按照那个方案调整是实现方面时间代价有点大，尝试了一下 qiankun 发现框架中可以不存在这个问题，所以决定更换微前端框架方案为 qianun。
如果想了解 icestark 可以看如下文章, 里面有一些关于微前端架构理念的思考.
主应用接入 qiankun
本地使用 vue-cli 创建了一个 Vue2.0 纯净项目作为主应用，执行 yarn add qiankun 命名安装 qiankun，在 main.js 中引入 qiankun, 注册并启动
import Vue from 'vue' import App from './App.vue' import VueRouter from 'vue-router' // --- 引入qiankun --- import { registerMicroApps, start } from 'qiankun' registerMicroApps([ { name: 'vueApp', entry: '//localhost:8081', container: '#container', activeRule: '/app-vue' } ]) start(); // --- end --- Vue.config.productionTip = false Vue.use(VueRouter) const router = new VueRouter({ mode: 'hash', base: '/', routes: [ { path: '/', name: 'home', component: () => import('./views/Home.vue') }, { path: '/home', name: 'home', component: () => import('./views/Home.vue') }, { path: '/hello', name: 'hello', component: () => import('./components/HelloWorld.vue') } ] }) new Vue({ router, render: h => h(App), }).$mount('#app') 复制代码
vue-router 安装时遇到一个小异常
安装 vue-router 时遇到一个版本兼容问题，通过 npm install vue-router --save 命令安装会提示版本不兼容，如下效果
提示版本不兼容，如果通过控制台提示执行 npm install vue-router --save --force 或 npm install vue-router --save --legacy-peer-deps 可以安装 vue-router，但是在 Vue 项目中使用时会有无法正确引入的异常
因为默认安装的 vue-router 是4.0大版本和现在的 vue 版本不兼容，要么升级 vue, 要么降级 vue-router，公司前端团队技术栈定的 Vue2.0 版本，果断降级 vue-router, 安装时 vue-router 时指定一个3.0的版本就行了, 执行 npm install vue-router@3.0.2 --save 命令即可。
子应用接入 qiankun
src 目录创建 public-path.js 文件，如果项目 lint 校验不通过需要添加 /* eslint-disable */
/* eslint-disable */ if (window.__POWERED_BY_QIANKUN__) { __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__; } 复制代码
修改 main.js 文件, 引入 public-path, 添加 qiankun 配置
import './public-path' import Vue from 'vue' import App from './App.vue' import routes from './router' import VueRouter from 'vue-router' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI) 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-vue/' : '/', mode: 'history', routes }) instance = new Vue({ router, render: (h) => h(App) }).$mount(container ? container.querySelector('#app') : '#app') } // 独立运行 if (!window.__POWERED_BY_QIANKUN__) { console.log('111') render() } // qiankun 钩子函数 export async function boostrap(){ 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.$destory(); instance.$el.innerHTML = ''; instance = null; router = null; } // main.js 原始写法 // new Vue({ // router, // render: h => h(App), // }).$mount('#app')
修改 vue.config.js 文件中的打包配置
const { name } = require('./package.json'); module.exports = { devServer: { headers: { 'Access-Control-Allow-Origin': '*', }, }, configureWebpack: { output: { library: `${name}-[name]`, libraryTarget: 'umd', // 把微应用打包成 umd 库格式 jsonpFunction: `webpackJsonp_${name}`, }, }, }; // 原始写法 // const { defineConfig } = require('@vue/cli-service') // module.exports = defineConfig({ // transpileDependencies: true // }) 复制代码
这时子应用的配置就添加好了
注意
Vue 子应用的 @vue/cli-xxx 依赖不能为 5.0 版本，当前配置下导致无法单独运行子应用。如果是安装的最新 vue-cli 脚手架创建的项目最好看一下 @vue/cli-xxx 相关版本。
