淺析NuxtJS項目如何進行qiankun微前端架構改造


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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM