vue3.0 创建 乾坤qiankun 微前端

最新推荐文章于 2024-07-13 13:44:55 发布
最新推荐文章于 2024-07-13 13:44:55 发布
阅读量5.5k 收藏 9
点赞数
分类专栏： vue 乾坤qinkun 文章标签： vue 乾坤qiankun
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39785489/article/details/114384999
版权

主应用：

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(store).use(router).mount('#app')

import { registerMicroApps, start } from 'qiankun';

// 注册子应用
registerMicroApps([
  {
    name: 'child1', 
    entry: '//localhost:8081',
    container: '#yourContainer',
    activeRule: '/child/child1',         // 子应用触发规则（路径）
  },
]);
// 开启服务
start()

app.vue

<template>
  <div id="nav">
    主应用
    <!-- 子应用容器 -->
    <div id="yourContainer" style="width: 100%;border: 1px solid #ccc;"></div>
    <!-- 路由跳转 -->
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <!-- 子应用路由跳转 -->
    <router-link to="/child/child1">child/child1</router-link>
  </div>
  <router-view/>
</template>

router index.ts

import { createRouter, createWebHistory, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import Home from '../views/Home.vue'

const routes: Array<RouteRecordRaw> = [
  {
    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')
  }
]

console.log(process.env.BASE_URL)
const router = createRouter({
  // history: createWebHashHistory(),
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

子应用：

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

const temp: any = window;
const isQiankun = temp.__POWERED_BY_QIANKUN__

export async function bootstrap() {
  console.log('react app bootstraped');
}

/**
 * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
 */
function render() {
  createApp(App).use(store).use(router).mount('#child1')
}
export async function mount(props: any) {
  console.log(props)
  render()
}
// createApp(App).use(store).use(router).mount('#child1')
/**
 * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
 */
export async function unmount(props: any) {
    console.log(props)
}

/**
 * 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
 */
export async function update(props: any) {
  console.log('update props', props);
}

isQiankun || render();

router index.ts

import { createRouter, createWebHistory, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import Home from '../views/Home.vue'

const routes: Array<RouteRecordRaw> = [
  {
    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 = createRouter({
  history: createWebHistory('/child/child1'),
  // history: createWebHistory(process.env.BASE_URL),
  // history: createWebHashHistory(),
  routes
})

export default router

vue.config.js

const { name } = require('./package');

const port = 8081; // dev port
const dev = process.env.NODE_ENV === 'development'
module.exports = {
  publicPath: dev ? `//localhost:${port}` : '/',
  devServer: {
    port,
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
  // 自定义webpack配置
  configureWebpack: {
    output: {
      // 把子应用打包成 umd 库格式
      library: `${name}-[name]`,
      libraryTarget: 'umd',
      jsonpFunction: `webpackJsonp_${name}`,
    },
  },
};

index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <!-- id不能与主应用重复 -->
    <div id="child1"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

2021-12-27更新

上面的代码会出现偶发性的子应用中使用浏览器返回 url地址错误 导致无法返回页面的情况

修改子应用

router

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import View from '@/components/view/Index.vue'

const routes: Array<RouteRecordRaw> = [
  // {
  //   path: '/home',
  //   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')
  // },
  {
    path: '/',
    redirect:'/qkcr-child1'
  },
  {
    path: '/qkcr-child1',
    component: View,
    redirect: '/qkcr-child1/home',
    name: 'qkcr-child1',
    meta: {
      title: 'qkcr-child1',
    },
    children: [
      {
        path: 'home',
        component: () => import(/* webpackChunkName: "system" */ '../views/Home.vue'),
        name: 'Home',
      },

      {
        path: 'about',
        component: () => import(/* webpackChunkName: "system" */ '../views/About.vue'),
        name: 'About'
      }
    ]
  }
]

const router = createRouter({
  // history: createWebHistory(process.env.BASE_URL),
  // history: createWebHistory('/qkcr-child1'),
  history: createWebHistory('/'),
  routes
})

export default router

@/components/view/Index.vue 

<template>
  <router-view />
</template>

子应用中的路由相互跳转

<div id="nav">
    <router-link to="/qkcr-child1/home">Home</router-link> |
    <router-link to="/qkcr-child1/about">About</router-link>
  </div>

修改主应用

跳转到子应用

<router-link to="/qkcr-child1/about">qkcr-child1</router-link>

qiankun注册子应用

// 注册子应用
      registerMicroApps([
        {
          name: 'qkc-child1', 
          entry: '//localhost:8081',
          container: '#qiankunContainer',
          activeRule: '/qkcr-child1',         // 子应用触发规则（路径）
        },
      ]);
      // 开启服务
      start()

该用户已成仙
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 14
    评论
专栏目录
基于Vue-cli3.0的qiankun（乾坤）前端微服务说明
qq_37682086的博客
12-21 1万+
基于Vue-cli3.0的qiankun（乾坤）前端微服务说明 官方文档地址：qiankun.umijs.org/zh ##主服务 ###1.安装乾坤依赖(子服务不需要安装，只需要暴露生命周期方法) ###2.在入口文件js中添加如下代码 import {registerMicroApps, start} from "qiankun"; let microProject = [ { //项目名称，应当与子服务中的package.json项目名称一致 name: 'wdcsLogin ap
vue3+ts+webpack作为子应用接入乾坤主应用流程概述
Web_Sam的博客
03-10 483
vue3+ts+webpack作为子应用接入乾坤主应用流程概述
微前端完整vue实例-乾坤【qiankun】
01-16
功能说明： 1.此实例包含有一个`qiankun-main`主应用和`qiankun-vue-child`子应用。【可以包含若干个子应用，这里只建立一个vue子应用进行演示】 2.主应用跨域访问子应用系统。 3.无node_modules，执行npm install即可。 更新时间：2021-03-26
vue3 搭建乾坤微服务
m0_59118465的博客
01-08 1524
vue3搭建乾坤微服务
vue3+qiankun项目搭建_qiankun vue3创建路由
最新发布
2401_84434331的博客
07-13 480
component: () => import(‘@/components/child’) //绑定一个child组件。“Access-Control-Allow-Origin”: “*”, // 允许跨域访问子应用页面。// 注意需要引入public-path。“Access-Control-Allow-Origin”: “*”, // 配置跨域。/public-path’ // 引入public-path文件。‘/vue’ : ‘/’, // qiankun进入子应用时，返回true。
vue3+qiankun项目搭建_qiankun vue3创建路由(1)
2401_84437604的博客
07-12 476
component: () => import(‘@/components/child’) //绑定一个child组件。“Access-Control-Allow-Origin”: “*”, // 允许跨域访问子应用页面。// 注意需要引入public-path。“Access-Control-Allow-Origin”: “*”, // 配置跨域。/public-path’ // 引入public-path文件。‘/vue’ : ‘/’, // qiankun进入子应用时，返回true。
vue3+vite+qiankun搭建微应用前端框架
qq_37759901的博客
05-10 1698
到此主应用配置完成，若还出现其他问题，打开qiankun应用官网常见问题查看https://qiankun.umijs.org/zh/faq#application-died-in-status-not_mounted-target-container-with-container-not-existed-while-xxx-loading。所有微应用路由都在主应用中注册，注册Portal.vue组件，所有微应用路由使用同一个vue组件。在子路由下添加微应用加载时容器。3．在主应用中注册微应用路由。
qiankun在vue3 vue2 为主应用 ，vue3+vite为子应用 使用
sj18838107211的博客
04-27 1350
qiankun在vue3 vue2 为主应用 ，vue3+vite为子应用 使用
基于vue3+koa2+qiankun2的微前端后台管理系统项目实战.zip
03-03
vue3.0beta体验在下面【子应用构建】章节 主应用项目主要在5个文件：utils文件夹，app.vue，appRegister.js，main.js，render.js 前提条件 cnpm i qiankun -S 在主应用下载qiankun，注意使用2.0以上版本
vue3+qiankun+vite搭建微前端服务
LD喂！的博客
03-16 4272
因业务需要搭建一套微前端服务, 阅读文档时发现qiankun与vite无法一起使用,需要引入额外插件才可以一起使用,在这里记录下 qiankun基座配置 1.修改index.html中div的id,并在main.js中修改挂在函数 //index.html <div id="qiankunBaseApp"></div> //main.js createApp(App) .mount('#qiankunBaseApp') 2.main.js启动qiankun import { r
VUE3+TS+微前端实践
kuari233的博客
06-20 736
基于架构的调整，前端开始转为微前端。经过调研，决定使用qiankun微服务框架来使用，本文将介绍VUE3+TS+qiankun的实践经过。微服务架构的优势之一在于可以结合不同技术栈的节点，基于技术栈的考虑，此处用的都是vue3。qiankun框架确实挺不错的，配置也并不是复杂，但是唯一想吐槽的一点是对于ts的支持感觉不太好/狗头，或许是我写得不够好吧，后面会持续优化使用。
微前端qiankun (vue3+vite+ts+history)
li_970408的博客
07-28 1825
一 什么是微前端。
微前端架构-qiankun在vue3的应用
wondermaomao的博客
01-30 4962
qiankun是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。其他几款（[single-spa]、[micro-app]、[百度emp]]）使用 iframe 整合系统时，假设我们有系统 A, 当我们想把系统 B 引入 A 系统时，只需要 B 系统提供一个 url 给 A 系统引用即可，这里我们把 A 系统叫做父应用，把 B 系统叫做子应用。同样的，微前端也延续了这个概念，微前端在使用起来基本和使用 iframe 一样平滑。
vue3项目下配置qiankun
qq_21295455的博客
05-20 642
vue3项目下配置qiankun
乾坤qiankun框架搭建 主应用为vue3的项目。
qq_58946831的博客
06-09 1470
乾坤qiankun框架搭建主应用为vue3的项目
qiankun引入vue3子项目实践
junner443的博客
03-28 987
qiankun引入vue3子项目实践 背景 vue3优点就不
07. vue3+vite+qiankun搭建微应用前端框架，并接入vue3微应用
热门推荐
qq_29517595的博客
02-08 1万+
vue3+vite的主应用，改造成基于qiankun的微应用框架。并实现接入vue3+vite微应用、vue2+webpack微应用。微应用的接入，是在主应用的路由菜单中进行激活，也就是说，主应用的一个菜单可以对应一个微应用系统，主应用中展示哪些微应用的路由，可以在主应用在自定义。并且完成了部署，解决了主应用部署在二级目录、三级目录的难题
qiankun + Vue3
m0_49788155的博客
09-07 4418
qiankun + Vue3
vue3.0创建项目
07-29
要在Vue 3.0中创建一个项目，你需要先安装Vue CLI。以下是创建Vue 3.0项目的步骤： 1. 首先，确保你已经安装了Node.js和npm。你可以在命令行中运行以下命令来检查它们的版本： ``` node -v npm -v ``` 2. 安装Vue ...
评论 14
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值