qiankun 微前端改造成功之后,有几个固定的步骤,但都是在 SPA 页上改造成功的。所以昨天在 SPA 改造之后,我也在想如何能应用到我们项目上去,但是我们项目是有很多 SEO 的需求,所以采用的 SSR 渲染的 NuxtJS 改造的。
NuxtJS 项目和 SPA 的VUE项目还是有挺大差别的,比如没有 mount 挂载的 id,没有 main.js 启动文件,所有的启动类文件都是在 nuxt.config.js 里以插件 plugins 的形式启动等。如果要把 nuxtjs 项目改造成微应用,我还真不知道怎么改造,如果有改造过的大神,请不吝赐教。
但是想到如果把 nuxtjs 项目作为主应用来改造,则比较方便。这样就是说:把需要 SSR 渲染的模块放在主应用里,把不需要 SSR 渲染的模块就放在微应用里去做,这样就可以达到我们的要求啦。所以有想法了,就来试吧。
一、Nuxt 项目作为主应用改造
1、根目录新建 micros 文件,新建 index.js、app.js 文件,其他就不多说了,跟之前改造一样
也可以比如在 utils 工具类文件夹下新增 micros.js 将上述2个文件内容写入,导出 start 方法。具体怎么弄,看自己咯。
2、在 plugins 里某文件下 引入 start ,并执行以启动 qiankun。
...... import start from '@/utils/micros.js' ...... start()
3、在 nuxt.config.js 里加入插件启动,需要注意的是:要以 ssr:false 的形式
plugins: [ { src: '@/plugins/global', ssr: false }, ...... ],
4、在 layouts / default.vue 里加上微应用容器
<!-- 新添加,微应用的容器 --> <div id="order-container"></div>
这样主应用就改造成功了。
二、微应用改造
微应用改造就不多说了,跟之前一样
改造后的效果,我在我们 nuxtjs 项目里嵌入了几个之前的别的项目的页面,如下:
总体来说改造体验还是不错的,所以说遇到问题比如 SSR 渲染 NuxtJS 项目、VUE3 + Vite 项目,这种如果不适合微应用改造的,我们就可以作为主应用来去做,把适合方便做微应用改造的项目去作为微应用,这样也能解决大部分问题。