1、需要安装插件：实际开发过程需要其他插件的话，在增加

Vue主引用：dependencies：qiankun

Nuxt子应用：devDependencies（开发依赖）：@femessage/nuxt-micro-frontend（需要暴露qiankun方法给主应用调用）；dependencies（生产依赖）：@nuxtjs/router（需要对nuxt page目录下的路由重写）

2、vue-cli 脚手架搭建主应用；

需要在入口main.js中引入乾添加

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import store from './store'
import { registerMicroApps, start } from 'qiankun'
Vue.config.productionTip = false
Vue.use(ElementUI)
new Vue({router,store,render: h => h(App)
}).$mount('#app')
/* 注册子应用registerMicroApps(apps, lifeCycles)apps: 必填，子应用注册的信息lifeCycles: 全局微应用生命周期钩子
*/
registerMicroApps([{name: 'vueApp', entry: 'http://localhost:8081', container: '#vue-child', // 渲染微应用的容器节点activeRule: '/app-vue', // 微应用的激活规则，路由匹配到/app-vue时,加载子应用props: { // 父传子values: '123213'// routerBase: '' // 设置子应用的基础路由}},{name: 'polNuxtApp', // 微应用名称，确保唯一entry: 'http://localhost:3000', // 子应用的地址 微应用的入口; 在nuxt.config.js中引用的静态资源需要跨域；需要配置Nginx; 参考：https://segmentfault.com/a/1190000012550346container: '#pol-nuxt-child', // 渲染微应用的容器节点activeRule: '/pol-app-nuxt', // 微应用的激活规则，路由匹配到/pol-app-nuxt时,加载子应用props: { // 父传子// default: 默认主题 dark：暗黑主题theme: 'dark'}}],{beforeLoad: app => {console.log('before load app.name====>>>>>', app.name)},beforeMount: [app => {console.log('[LifeCycle] before mount %c%s', 'color: green;', app.name)}],afterMount: [app => {console.log('[LifeCycle] after mount %c%s', 'color: green;', app.name)}],afterUnmount: [app => {console.log('[LifeCycle] after unmount %c%s', 'color: green;', app.name)}]}
)
// 设置主应用启动后默认进入的微应用
// setDefaultMountApp('/app-vue')
// 启动 qiankun
start()

添加id容器去加载子应用：

 <div id="pol-nuxt-child" style="height:1080px"><!-- 子应用内用 --></div>

3、Nuxt 子应用的配置

配置nuxt.config.js文件：buildModules 中引入@nuxtjs/router；modules中引入@femessage/nuxt-micro-frontend；增加mfe.js 暴露乾坤；

buildModules: [// Doc: https://github.com/nuxt-community/eslint-module'@nuxtjs/eslint-module',['@nuxtjs/router',{ keepDefaultRouter: true, path: './router', fileName: 'index.js' }]],/*** Nuxt.js modules*/modules: [// Doc: https://axios.nuxtjs.org/usage// See https://axios.nuxtjs.org/options['@nuxtjs/axios', {proxy: true}],'@femessage/nuxt-micro-frontend'],// 暴露乾坤MFE: {force: true},

增加mef.js；文件目录跟nuxt.config.js同级

export default function (render) {if (!window.__POWERED_BY_QIANKUN__) {render()}
}export function bootstrap () {console.log('bootstrap')
}export async function mount (render, props) {console.log('mount-----')await render()
}export async function update () {await console.log('update-----')
}export function mounted (instance, props) {// 主应用传值操作localStorage.setItem('theme', props.theme)console.log('nuxt--子应用', props)
}export function beforeUnmount (instance) {console.log('beforeUnmount-----')
}
export function unmount () {console.log('unmount-----')
}

新增router重写路由；通过window.__POWERED_BY_QIANKUN__ 去加载主应用的基础路由；

注意事项：对嵌套路由和动态路由处理，动态路由处理必须加上‘.vue’文件后缀；

const qkBaseRoute = window.__POWERED_BY_QIANKUN__ ? '/pol-app-nuxt' : ''

import Router from 'vue-router'
import qkCofing from '@/qkCofing.js'
// 当前默认路由放置到自定义路由
export function createRouter (ssrContext, createDefaultRouter, routerOptions) {let optionsrouterOptions ? options = routerOptions : options = createDefaultRouter(ssrContext).optionsreturn new Router({...options,mode: 'history',routes: setBaseRouter(options.routes)})
}
function dynamicImport (path) {const curPath = setDynamicRoute(path)return import(`~/pages${curPath}`).then(m => m.default || m)
}
const resolveRoute = route => ({...route,path: `${qkCofing.qkBaseRoute}${route.path}`,component: () => dynamicImport(route.path)
})
function setBaseRouter (routes) {return routes.map(route => ({...resolveRoute(route),children: route.children ? setNestRoute(route).map(resolveRoute) : []}))
}
// 处理嵌套路由
function setNestRoute (route) {const curIndex = route.path.lastIndexOf('/')const curStr = route.path.substring(curIndex + 1, route.path.length)route.children.map(item => {item.path ? item.path = `${route.path}/${item.path}` : item.path = `${route.path}/${curStr}`})return route.children
}
// 处理动态路由
function setDynamicRoute (path) {let curPath = pathif (path.includes(':') && path.includes('?')) {curPath = curPath.replace(':', '_').replace('?', '.vue')}return curPath
}

注意事项：

1、nuxt.config.js： script、link引入的静态文件需要配置ngnix跨域；参考：Nginx配置跨域请求 Access-Control-Allow-Origin * - SegmentFault 思否

2、子应用开发过程中调用服务端代理问题：

除子应用需要代理外

主应用也需要设置代理

3、子应用中通过ifream 嵌入的系统，能正常使用；

4、本地存储：主应用和子应用是共享的；

5、对嵌套路由和动态路由处理，动态路由处理必须加上‘.vue’文件后缀；

qiankun: 子应用 nuxt框架嵌入到主应用vue-cli相关推荐

qiankun前端微服务框架
目录一.须知二.主应用配置 2.1 main.js 2.2 app.vue 三.微应用配置 3.1 注册 3.1.1 vue.config.js配置 3.1.2 新增文件 publicPath.j ...
基于vue的nuxt框架cnode社区服务端渲染
nuxt-cnode 基于vue的nuxt框架仿的cnode社区服务端渲染,主要是为了seo优化以及首屏加载速度线上地址 http://nuxt-cnode.foreversnsd.cn githu ...
C#之如何把子窗体嵌入到主窗体中显示
C#之如何把子窗体嵌入到主窗体中显示今天总结一下把子窗体嵌入到主窗体中显示的方法.当你点击一个Button显示子窗体时,往往子窗体都是单独弹出,而如果想要子窗体直接在主窗体上显示,这就需要将子窗体嵌 ...
（转）Hibernate框架基础——映射主键属性
http://blog.csdn.net/yerenyuan_pku/article/details/52740744 本文我们学习映射文件中的主键属性,废话不多说,直接开干. 我们首先在cn.it ...
第五天黑马十次方 NUXT框架、前台的搭建、前台活动模块的功能、前台招聘模块的功能
第5章网站前台-活动与招聘学习目标: 掌握NUXT框架的基本使用方法完成十次方网站前台的搭建完成十次方网站前台活动模块的功能完成十次方网站前台招聘模块的功能 1 服务端渲染技术NUXT 1. ...
OSGI框架嵌入Http服务器的环境配
OSGI框架嵌入Http服务器的环境配参考OSGi原理与实践这本书籍操作,其中org.mortbay.jetty.jar这个包,我eclipse没有,从网上下了这个包,当插件安装,在run-> ...
Nuxt框架使得服务器内存溢出
出现的问题:用压测软件测自己写的程序,吞吐量从90/s一直降低到40/s,然后报了以下错误.Nuxt框架使得服务器内存溢出,使用Nuxt上架PC官网项目,上线后,使用压测工具进行压测,运行了三五分钟后 ...
qiankun子应用不停重复加载问题
qiankun子应用不停重复加载问题如图所示,接入微应用后,控制台不停的在应用生命周期中打印 before load.一开始还以为是路由问题,后来发现是其他开发人员少加了qiankun中config ...
4 angular 重构项目_vuejs angularjs 框架的一些比较（vue项目重构四）
使用Angularjs和Vue.js对比首先需要说明的是:现在默认angularjs指angular1.0+版本,angular默认指2.0以上版本.本文的名词也默认指定angular的1.0+版本 ...

qiankun: 子应用 nuxt框架嵌入到主应用vue-cli

1、需要安装插件：实际开发过程需要其他插件的话，在增加

2、vue-cli 脚手架搭建主应用；

3、Nuxt 子应用的配置

注意事项：

qiankun: 子应用 nuxt框架嵌入到主应用vue-cli相关推荐

最新文章

热门文章

qiankun: 子应用 nuxt框架 嵌入到 主应用vue-cli

1、需要安装插件：实际开发过程需要其他插件的话，在增加

2、vue-cli 脚手架搭建主应用；

3、Nuxt 子应用的配置

注意事项：

qiankun: 子应用 nuxt框架 嵌入到 主应用vue-cli相关推荐

最新文章

热门文章

qiankun: 子应用 nuxt框架嵌入到主应用vue-cli

qiankun: 子应用 nuxt框架嵌入到主应用vue-cli相关推荐