VUE3+TS+微前端实践

一. 前言

基于架构的调整，前端开始转为微前端。经过调研，决定使用qiankun微服务框架来使用，本文将介绍VUE3+TS+qiankun的实践经过。微服务架构的优势之一在于可以结合不同技术栈的节点，基于技术栈的考虑，此处用的都是vue3。

二. 环境

• vue 3.0.0
• TypeScript 4.1.5
• vue router 4.0.0
• @vue/cli 4.5.15
• qiankun 2.6.3

三. 实践

1. 架构

如上图所示，微服务架构将会由多个节点构成，首先由一个主节点site_base连接所有子节点，子节点可以不断拓展。

2. 主节点

创建主节点，选择vue3+ts

vue create site_base
cd site_base

安装qiankun

yarn add qiankun

在src/App.vue中添加路由和渲染节点

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link> |
    <!-- 新增site1路由 -->
    <router-link to="/site1">Site1</router-link> |
    <!-- 新增site2路由 -->
    <router-link to="/site2">Site2</router-link>
  </div>
  <router-view/>
  <!-- 新增site1渲染节点 -->
  <div id="site1" />
  <!-- 新增site2渲染节点 -->
  <div id="site2" />
</template>

在src/main.ts中引入子节点配置

import {
    createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import {
    registerMicroApps, start } from 'qiankun'

const apps: any[] = [
  {
   
    name: 'site1', // 应用的名字
    entry: 'http://localhost:9001/', // 默认加载这个html，解析里面的js动态的执行（子应用必须支持跨域，内部使用的是 fetch）
    container: '#site1', // 要渲染到的节点id，对应上一步中src/App.vue中的渲染节点
    activeRule: '/site1' // 访问子节点路由
  },
  {
   
    name: 'site2',
    entry: 'http://loc