qiankun微前端架构落地的一次实践

guhy fighting

已于 2022-08-19 11:24:55 修改

阅读量1.7k

点赞数

分类专栏：前端问题总结文章标签：前端 qiankun

于 2022-04-22 11:29:37 首次发布

本文链接：https://blog.csdn.net/u013994400/article/details/124320556

版权

本文介绍了qiankun微前端架构的应用实践，包括qiankun的定义、适用场景及详细使用步骤。qiankun是一个基于single-spa的框架，支持js沙箱、样式隔离等功能，使得在同一个页面上无缝集成多个微应用成为可能。文章详细阐述了主应用和子应用的创建过程，以及qiankun的简单配置方法。

摘要由CSDN通过智能技术生成

1、什么是qiankun？

qiankun: 是一个生产可用的微前端框架，它基于 single-spa，具备 js 沙箱、样式隔离、HTML Loader、预加载等微前端系统所需的能力。qiankun 可以用于任意 js 框架，微应用接入像嵌入一个 iframe 系统一样简单

2、应用场景？

主应用与多个相互独自的微应用一起构成了整个大的微前端应用
可以在同一个页面中，加载多个不同的微应用，每个微应用都是主应用的组成部分或者是提供一些增强能力，这种场景可以说是微应用粒度的前端组件化。

3、使用步骤

主应用

3.1 创建主应用，在这里我用的是vue3去创建的

 vue create main-app

3.2 在主应用中创建src/component/father.vue的组件

<template>
    <div>我是father</div>
</template>
<script>
    export default {
   
        name: "father"
    }
</script>

3.3 创建路由信息 src/router.js

import {
   
    createRouter,
    createWebHistory
} from 'vue-router'
const router = createRouter({
   
    history: createWebHistory(),
    routes: [{
   
            path: '/',
            redirect: '/father'
        },
        {
   
            path: '/father',
            component: () => import('@/components/father')
        }
    ]
})
export default router

3.4 在main.js中引入路由信息

import {
    createApp } from 'vue'
import App from './App.vue'
import router from './router'
let app = createApp(App)
app.use(router).mount('#app')

3.5 创建vue.config.js

module.exports ={
   
    devServer: {
   
        port: 8080,
        headers: {
   			// 重点1: 允许跨域访问子应用页面
            'Access-Control-Allow-Origin': '*',
        }
    }
<