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 項目,這種如果不適合微應用改造的,我們就可以作為主應用來去做,把適合方便做微應用改造的項目去作為微應用,這樣也能解決大部分問題。