浅析NuxtJS项目如何进行qiankan微前端架构改造

　　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 项目，这种如果不适合微应用改造的，我们就可以作为主应用来去做，把适合方便做微应用改造的项目去作为微应用，这样也能解决大部分问题。

标签：NuxtJS,项目,改造,js,应用,plugins,SSR,qiankan,浅析
来源： https://www.cnblogs.com/goloving/p/14998427.html