「这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战」。
对于大型项目（产品周期时间长，迭代次数多，几十个上百个页面组件等）的框架迁移，像vue2到vue3这种破坏型的升级，时间与人力成本都是非常高的，尤其业务开发时间紧任务重时，往往不能够有充足的时间（数周或者月）来一次性升级所有模块。一边以旧的技术栈开发新页面，一边在新的技术栈里面踩坑。一个头两个大的体验想必是不太愉快的。那么问题来了：一个项目能不能同时使用两个框架，使用新技术栈开发新需求，有时间回头迁移旧的模块，实现平滑升级，无缝衔接呢？
这时，微前端架构为这类迁移问题提供了一个方向。以官网实例为例子，我们来看如何搭建一个demo，为在实际项目中落地做出有效尝试。
- 主应用搭建：
如官网实例，主应用技术栈不限，安装 yarn add qiankun 然后按官方例子在main.js 中接入
registerMicroApps ([
{name: 'vueApp',
entry:'http://localhost:3001',
container: '#container',
activeRule:'/app-vue' //子应用路由
},
...
])
配置子应用路由，start() 启动qiankun
- 接入子应用：
首先把正在开发的Vue2项目拷贝一份进行改造，按照官网例子，main.js 中接入 bootstrap，mount，unmount,render等生命周期函数, 然后需要修改webpack的打包配置，使用的是Vue cli 所以修改vue.config.js 里的configureWebpack等：
const { name } = require('./package'); //name需要跟主应用路由中的name保持一致
...
// 同时需要使用devServer跨域打开，允许开发环境的js文件等被主应用加载
{
devServer: {
headers: {
'Access-Control-Allow-Origin': '*',
},
},
}
configureWebpack: {
output: {
library: `${name}-[name]`,
libraryTarget: 'umd',
jsonpFunction:
`webpackJsonp_${name}`,
}
}
由于项目本身加载了很多第三方的依赖，所以跨域错误使得接入没有成功，这一步待进一步解决。转向用vue3+vite搭建的一个单页项目。
- 第三步vite项目的搭建：
类似第二步改造完main.js 功能vite.config.js 后，加载出现报错， Cannot use import statemebnt outside a module的SyntaxError
，从issue评论区得出原因为qiankun通过eval执行子应用js文件，而eval目前还没有支持原生的es6。vite里面的import/export 需要使用babel转义才能被正确加载。然后发现了插件vite-plugin-qiankun, 按照作者给出实例改造了项目后成功加载子应用。
-
总结：
生产项目直接作为子应用接入主应用基座需要解决第三方依赖的跨域问题，有些难度。但是简单项目的聚合是完全没有问题的，微前端架构可以用来聚合多个零散的小型项目，实现统一入口，统一登录等功能。
代码细节待完善。
