前言
前兩天用了一下微前端框架 icestark, 在實(shí)際架構(gòu)搭建過(guò)程中發(fā)現(xiàn)中發(fā)現(xiàn)在 Vue 主應(yīng)用子應(yīng)用之間切換 tag （tag 分別主應(yīng)用和子應(yīng)用的頁(yè)面）頁(yè)簽時(shí)會(huì)有子應(yīng)用數(shù)據(jù)狀態(tài)無(wú)法保存的情況糖耸，搜索了一波解決方案后發(fā)現(xiàn)，icestark 中 React 應(yīng)用實(shí)現(xiàn)了對(duì)數(shù)據(jù)狀態(tài)的緩存，Vue 里面沒(méi)有這個(gè)實(shí)現(xiàn)渡处。
React 實(shí)現(xiàn)的思路是通過(guò) Tabs 組件結(jié)合 icestark 實(shí)現(xiàn)的一種機(jī)制颇玷，但是沒(méi)有用到路由奢人。由于架構(gòu)時(shí)間有限闸昨，發(fā)現(xiàn)按照那個(gè)方案調(diào)整是實(shí)現(xiàn)方面時(shí)間代價(jià)有點(diǎn)大，嘗試了一下 qiankun 發(fā)現(xiàn)框架中可以不存在這個(gè)問(wèn)題，所以決定更換微前端框架方案為 qianun昔搂。
如果想了解 icestark 可以看如下文章, 里面有一些關(guān)于微前端架構(gòu)理念的思考
主應(yīng)用接入 qiankun
本地使用 vue-cli 創(chuàng)建了一個(gè) Vue2.0 純凈項(xiàng)目作為主應(yīng)用，執(zhí)行 yarn add qiankun 命名安裝 qiankun镐捧，在 main.js 中引入 qiankun, 注冊(cè)并啟動(dòng)
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 安裝時(shí)遇到一個(gè)小異常
安裝 vue-router 時(shí)遇到一個(gè)版本兼容問(wèn)題，通過(guò) npm install vue-router --save 命令安裝會(huì)提示版本不兼容臭增，如下效果
提示版本不兼容懂酱，如果通過(guò)控制臺(tái)提示執(zhí)行 npm install vue-router --save --force 或 npm install vue-router --save --legacy-peer-deps 可以安裝 vue-router，但是在 Vue 項(xiàng)目中使用時(shí)會(huì)有無(wú)法正確引入的異常
因?yàn)槟J(rèn)安裝的 vue-router 是4.0大版本和現(xiàn)在的 vue 版本不兼容誊抛，要么升級(jí) vue, 要么降級(jí) vue-router列牺，公司前端團(tuán)隊(duì)技術(shù)棧定的 Vue2.0 版本，果斷降級(jí) vue-router, 安裝時(shí) vue-router 時(shí)指定一個(gè)3.0的版本就行了, 執(zhí)行 npm install vue-router@3.0.2 --save 命令即可拗窃。
子應(yīng)用接入 qiankun
src 目錄創(chuàng)建 public-path.js 文件瞎领，如果項(xiàng)目 lint 校驗(yàn)不通過(guò)需要添加 /* 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')
}
// 獨(dú)立運(yùn)行
if (!window.__POWERED_BY_QIANKUN__) {
console.log('111')
render()
}
// qiankun 鉤子函數(shù)
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 原始寫(xiě)法
// 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', // 把微應(yīng)用打包成 umd 庫(kù)格式
jsonpFunction: `webpackJsonp_${name}`,
},
},
};
// 原始寫(xiě)法
// const { defineConfig } = require('@vue/cli-service')
// module.exports = defineConfig({
// transpileDependencies: true
// })
這時(shí)子應(yīng)用的配置就添加好了
注意
Vue 子應(yīng)用的 @vue/cli-xxx 依賴(lài)不能為 5.0 版本，當(dāng)前配置下導(dǎo)致無(wú)法單獨(dú)運(yùn)行子應(yīng)用随夸。如果是安裝的最新 vue-cli 腳手架創(chuàng)建的項(xiàng)目最好看一下 @vue/cli-xxx 相關(guān)版本九默。
