qiankun 微前端 Demo

最新推荐文章于 2025-06-08 01:12:13 发布

原创最新推荐文章于 2025-06-08 01:12:13 发布 · 944 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #html5 #前端

本文档详细介绍了如何配置基座项目和子项目以实现qiankun微前端架构。基座项目中，主要配置了main.js，引入vue、element-ui，并注册子应用。子项目配置包括main.js、路由、vue.config.js，确保路由base正确设置，以避免路由匹配问题。qiankun框架使得子应用可以独立运行和部署，且具有沙箱隔离。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上代码，不多说。

qiankun 需要一个基座项目，下面这个就是基座vue项目的main.js的配置。

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';



Vue.use(ElementUI);



import {registerMicroApps, start} from 'qiankun'


const apps = [
  {
    name: 'vue',
    entry: '//192.168.1.50:80',
    // entry: 'http://localhost:12345/vue',
    container: '#vue',
    activeRule: '/vue',
    props: {
      store
    }
  }
]

registerMicroApps(apps)

start()


Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

App.vue文件的配置

<template>
  <div>


<el-menu :router="true" class="el-menu-demo" mode="horizontal">
  <el-menu-item index="/">home</el-menu-item>
  <el-menu-item index="/vue">vue</el-menu-item>
</el-menu>



    <router-view/>
    <div id="vue"></div> 这个就是子项目需要加载时的目标坑位
  </div>
</template>

<style>

</style>

以上就是基座项目的基本配置。其中mian.js 中的 props可以传递给子项目。

下面是子项目的配置

main.js的配置信息。

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'


let instance = null;
function render() {
    instance = new Vue({
        router,
        store,
        render: h => h(App)
    }).$mount('#app')
}


if (!window.__POWERED_BY_QIANKUN__) {
    /* eslint-disable */ 
    render()
} else {
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}


export async function bootstrap() {

}
export async function mount(props) {
    console.log(props, 11)

    render(props)

}
export async function unmount(props) {
    instance.$destroy()
    console.log(props)
}

下面是route配置

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: '/vue',
  routes
})

export default router

注意：路由的base一定要配置，如果配置不正确，会出现子项目路由匹配不到。

下面是vue.config.js 配置信息

module.exports = {
    publicPath: '/vue',
    devServer: {
        port: 12345,
        headers: {
            'Access-Control-Allow-Origin': '*'
        }
    },
    configureWebpack: {
        output: {
            library: 'vue1',
            libraryTarget: 'umd'
        }
    }
}

以上两个项目都是用vue脚手架生成的版本是3.0.

qiankun这个框架很好用。子项目可以独立运行，独立部署，沙箱隔离。