本文主要是介绍vue-qiankun微前端，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

官网: https://qiankun.umijs.org/zh

首先 主应用

yarn add qiankun    或者   npm i qiankun -S

然后 主应用main.js注册子应用

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([{

name: 'vueDome', // 子应用名称

entry: '//localhost:8081', // 子应用服务(改成自己的)

container: '#vueDome',  // 这里需要与App.vue里边新建dom的id一样

activeRule: '/#/vue-dome', // 本项目路由没有采用history模式

}]);

// 启动 qiankun

start();

 主应用App.vue 新建div用来存放子应用(id需与上述注册内container的value一样)

 子应用

子应用main.js 先暴露三个生命周期

import Vue from 'vue'

import App from './App.vue'

import router from './router'

import store from './store'

Vue.config.productionTip = false

let instance = null

function render({ container, parentStore } = {}) {

instance = new Vue({

router,

store,

data() {

return { parentStore }

},

render: h => h(App)

}).$mount(container ? container.querySelector('#vueDome') : '#vueDome')

// 这里的id，应与 index.html 里边的 id 保持一致，不然无法找到 (index.html内id不能与主项目index.html相同[app],这里边id我改为vueDome)

}

if (window.__POWERED_BY_QIANKUN__) {

__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;

}

if (!window.__POWERED_BY_QIANKUN__) {

// 全局变量来判断环境

render()

}

/**

* bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。

* 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。

*/

export async function bootstrap() {

console.log('子应用bootstrap阶段')

}

/**

* 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法

*/

export async function mount(props) {

console.log('现在进入子应用的mount周期', props)

render(props)

}

/**

* 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例

*/

export async function unmount() {

console.log('现在进入子应用的unmount阶段')

instance.$destroy()

instance.$el.innerHTML = ''

instance = null

}

/**

* 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效

*/

export async function update(props) {

console.log('子应用update props', props)

}

 

 

接下来 把路由 加一点判断 

window.__POWERED_BY_QIANKUN__ 这个是qiankun用来判断是否是通过qiankun来进入的应用

import Vue from 'vue'

import VueRouter from 'vue-router'

import Home from '../views/Home.vue'

const Path = window.__POWERED_BY_QIANKUN__ ? '/vue-dome' : ''

Vue.use(VueRouter)

const routes = [

{

path: Path === '' ? '/' : Path,

name: 'Home',

component: Home

},

{

path: Path + '/about',

name: 'About',

component: function () {

return import(/* webpackChunkName: "about" */ '../views/About.vue')

}}]

const router = new VueRouter({

routes

})

if (window.__POWERED_BY_QIANKUN__) {

// 路由全局守卫

router.beforeEach((to, from, next) => {

// 判断要跳转的路由是否带 /vue-dome

if (!to.path.includes("/vue-dome")) {

// 判断是否要回主项目 / 是要回主项目 如果是要回主项目直接放行

if(to.path === '/') return next()

// 不是要回主项目 就拼接/vue-dome后 next

next({path: "/vue-dome" + to.path})

} else { next() }

})}

export default router

然后 再把index.html的id再改一下，与main.js内相同(但是切记不可再为 app 因为与主项目冲突) 

最后把 vue.config.js 配置一下

'use strict'

const path = require('path')

function resolve (dir) {

return path.join(__dirname, dir)

}

const port = 8080 // 端口配置

const name = 'main-app'

module.exports = {

// hash 模式下可使用

publicPath: process.env.NODE_ENV === 'development' ? '/' : '/main-app/',

outputDir: 'dist',

assetsDir: 'static',

lintOnSave: process.env.NODE_ENV === 'development',

productionSourceMap: false,

devServer: {

port: port,

open: false, // 启动项目以后自动打开浏览器

hot: true, // 模块热替换(HMR - hot module replacement)功能会在应用程序运行过程中，替换、添加或删除 模块，而无需重新加载整个页面。主要是通过以下几种方式，来显著加快开发速度

hotOnly: false, // hot 和 hotOnly 的区别是在某些模块不支持热更新的情况下，前者会自动刷新页面，后者不会刷新页面，而是在控制台输出热更新失败

overlay: {

warnings: false,

errors: true

},

proxy: {

'/auth': {

target: 'http://192.168.13.157:8199',

changeOrigin: true,

pathRewrite: {

'^/auth': 'auth'

}}}},

configureWebpack: {

name: name,

resolve: {

alias: {

'@': resolve('src')

}}}}

 

这样就完成了，弄的不好 望各位大佬见谅，如有不足欢迎补充，谢谢！ 

 

这篇关于vue-qiankun微前端的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！