微前端-qiankun:vue3-vite 接入 nuxt2-爱代码爱编程
一、背景
主应用:vue3、vite
子应用: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应用,接入成功。
三、欢迎交流指正,关注我,一起学习。
参考链接: