yihuan / qiankun-base Goto Github PK

View Code? Open in Web Editor NEW

Main app of micro frontend architecture with qiankun, with everything configured to be ready to use

JavaScript 18.90% HTML 0.38% Vue 76.34% SCSS 4.28% CSS 0.11%

qiankun-base's Introduction

qiankun基座项目

qiankun基座项目，通过 qiankun 加载其他子项目

项目启动

本地开发

包管理工具：yarn（建议，远程打包机器也是用的yarn）
Node 版本：14.19.2
本地安装：yarn or yarn install
本地删除重新安装：yarn reinstall
本地启动：yarn start
编译打包：yarn build
Lint：yarn lint

子应用配置

菜单或页面中需要加载子应用页面的配置

在 app.const.js 中 SUB_APPS 中配置子应用详细信息

// key: 唯一值，区分子应用，路由配置需要
// domain: 子应用域名
// shortPath: 短路径名称
export const SUB_APPS = freeze({
  WORK: freeze({
    key: 'work',
    domain: isProd
      ? `${origin}/work/`                // 远程环境配置
      : 'http://localdomain.com:8001/work/', // 本地配置
    shortPath: 'w'
  })
}

在路由 router/index.js 中配置路由

// router/index.js
{
  name: 'HomeWork',
  path: SUB_APPS.WORK.shortPath,
  component: () => import('@/views/HomeWork.vue')
}

在需要插入子应用页面的地方引入 SubAppEntry

// HomeWork.vue
<template>
  <SubAppEntry />
</template>
<script setup>
import SubAppEntry from '@/components/common/SubAppEntry.vue'
</script>

路由页面中指定位置引入子应用可参考这里

后端接口域名配置

api.js 中的 BASE_URL 定义。

export const BASE_URL = isProd
  ? window.location.origin + '/work/'                   // 线上
  : window.location.protocol + '//localdomain.com/work/' // 本地