微前端-qiankun：vue3-vite 接入 nuxt2

拼搏现实的明天。 2024-03-25 18:14 75阅读 0赞

**一、背景**

**主应用：vue3、vite**

[主项目接入qiankun][qiankun]

**子应用：nuxt2、webpack**

**二、代码-接入子应用**

2.1、安装@femessage/nuxt-micro-frontend

> @femessage/nuxt-micro-frontend

2.2、nuxt.config.js

export default {
      // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
      ssr: false,
      server: {
        port: 3005,
        host: '0.0.0.0',
        'Access-Control-Allow-Origin': '*', // 允许跨域
      },
      // Global page headers: https://go.nuxtjs.dev/config-head
      head: {
        title: 'qiankun-base-nuxt2',
        htmlAttrs: {
          lang: 'en'
        },
        meta: [
          { charset: 'utf-8' },
          { name: 'viewport', content: 'width=device-width, initial-scale=1' },
          { hid: 'description', name: 'description', content: '' },
          { name: 'format-detection', content: 'telephone=no' }
        ],
        link: [
          { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
        ]
      },
    
      // Global CSS: https://go.nuxtjs.dev/config-css
      css: [
        'element-ui/lib/theme-chalk/index.css'
      ],
    
      // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
      plugins: [
        '@/plugins/element-ui'
      ],
    
      // Auto import components: https://go.nuxtjs.dev/config-components
      components: true,
    
      // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
      buildModules: [
        // https://go.nuxtjs.dev/eslint
        '@nuxtjs/eslint-module'
      ],
      // MFE
      MFE: {
        force: true
      },
    
      // Modules: https://go.nuxtjs.dev/config-modules
      modules: [
        // https://go.nuxtjs.dev/axios
        '@nuxtjs/axios',
        '@femessage/nuxt-micro-frontend' , // qiankun
      ],
    
      // Axios module configuration: https://go.nuxtjs.dev/config-axios
      axios: {
        // Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308
        baseURL: '/'
      },
    
      // Build Configuration: https://go.nuxtjs.dev/config-build
      build: {
        transpile: [/^element-ui/]
      }
    }

2.3、根目录创建文件 mfe.js

import Vue from 'vue'
    
    export default function(render) {
      if (!window.__POWERED_BY_QIANKUN__) {
        render()
      }
    }
    
    export function bootstrap() {}
    
    export async function mount(render, props) {
      await render()
    }
    
    export async function update() {}
    
    export function mounted(instance, props) {
      console.log(props)
      if (props.sdk) {
        Vue.prototype.$sdk = props.sdk
      }
    }
    
    export function beforeUnmount(instance) {}
    export function unmount() {}

2.4、访问主项目，访问到nuxt应用，接入成功。

![6a52d43afc3e4285af378e3214af1583.png][]

**三、欢迎交流指正，关注我，一起学习。**

**参考链接：**

[安装 - NuxtJS | Nuxt.js 中文网][- NuxtJS _ Nuxt.js]

[qiankun]: https://blog.csdn.net/snowball_li/article/details/125432769
[6a52d43afc3e4285af378e3214af1583.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/dc2c35055adc454fb934359b7ca304ef.png
[- NuxtJS _ Nuxt.js]: https://www.nuxtjs.cn/guide/installation