微前端完整vue实例-乾坤【qiankun】

最新推荐文章于 2025-09-25 11:07:52 发布

原创

最新推荐文章于 2025-09-25 11:07:52 发布 · 1.1w 阅读

80 ·

CC 4.0 BY-SA版权

文章标签：

#vue #微服务

本文详细介绍了如何使用Vue和乾坤实现微前端应用，包括主应用qiankun-main的创建、跨域配置，子应用qiankun-vue-child的搭建、配置及注册过程，以及生命周期管理和数据传递的实战步骤。

微前端vue实例-乾坤【qiankun】

一、前言
二、乾坤实例应用

一、前言

功能说明：

此实例包含有一个qiankun-main主应用和qiankun-vue-child子应用。【可以包含若干个子应用，这里只建立一个vue子应用进行演示】

主应用跨域访问子应用系统。

qiankun-main主应用运行端口8085，qiankun-vue-child子应用运行端口8083。【由于使用了vue create创建vue项目，故需在项目文件夹下手动创建vue.config.js进行配置，下面会讲到】

参考文档：qiankun 官方文档

相关推荐：微服务相比iframe的优势

博客资源下载：微前端完整vue实例-乾坤【qiankun】

二、乾坤实例应用

STEP1：前期准备工作【需关注代码注释重点部分】

1. 创建主应用【qiankun-main】

新建主应用。

vue create qiankun-main

创建src/components/father.vue，内容如下：

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

src/router/index.js中添加路由信息，内容如下：

import Router from 'vue-router'
export default new Router({
   
   
    mode:'history',
    base:'',
    routes: [
        {
   
    path: '/', redirect: '/father'},
        {
   
    path:'/father', component: ()=> import('@/components/father')}
    ]
})

在main.js中引入路由，内容如下：

import Vue from 'vue';
import App from './App.vue'
import Router from 'vue-router'
import router from "./router"
Vue.use(Router)
new Vue({
   
   
    router,
    render: h => h(App),
}).$mount('#app')

在项目根目录下新建vue.config.js，添加内容如下：

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

修改app.vue中的内容，如下：

<template>
  <div class="app">
    <span><router-link to="/">点击跳转到父页面</router-link></span>

最低0.47元/天解锁文章