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