一、qiankun+vue3+ts+vite 初始配置

最新推荐文章于 2024-04-27 17:33:49 发布

Kevin_Leung_

最新推荐文章于 2024-04-27 17:33:49 发布

阅读量625

点赞数 1

分类专栏：微前端（qiankun）文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/Kevin_Leung_/article/details/129301584

版权

微前端（qiankun）专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、父项目

1、安装qiankun

npm install qiankun -s

2、配置加载节点

在app.vue内html代码新增如下代码

<div id='container'></div>

3、src目录下新建文件夹qiankun及在文件夹内新建qiankun.ts, 文件内容如下：

import { registerMicroApps, runAfterFirstMounted, setDefaultMountApp, start, initGlobalState } from 'qiankun'
const loader = (loading: boolean) => {
  console.log('loading', loading)
}

registerMicroApps(
  [
    //name: 微应用的名称,
    //entry: 微应用的入口,
    //container: 微应用的容器节点的选择器或者 Element 实例,
    //activeRule: 激活微应用的规则(可以匹配到微应用的路由),
    //loader: 加载微应用的状态 true | false
    {
      name: 'vue3-1',
      entry: 'http://localhost:5174',
      container: '#container',
      activeRule: '/c1',
      loader
    },
    {
      name: 'vue3-2',
      entry: 'http://localhost:5175',
      container: '#container',
      activeRule: '/c2',
      loader
    }
  ],
  {
    beforeLoad: [
      (app) => {
        console.log('[LifeCycle] before load %c%s', 'color: green;', app.name)
      }
    ],
    beforeMount: [
      (app) => {
        console.log('[LifeCycle] before mount %c%s', 'color: green;', app.name)
      }
    ],
    afterUnmount: [
      app => {
        console.log('[LifeCycle] after unmount %c%s', 'color: green;', app.name)
      }
    ]
  }
)

/**
 * Step3 设置默认进入的子应用
 */
setDefaultMountApp('/c1')

/**
 * Step4 启动应用
 */
start({
  // sandbox: { strictStyleIsolation: true }
})
// 首次加载
runAfterFirstMounted(() => {
  console.log('[MainApp] first app mounted')
})

4、main.ts文件引入qiankun.ts文件

import './quankun/qiankun'

子项目

1、添加依赖

留意：不能直接添加qiankun依赖，需使用其它插件

npm i vite-plugin-qiankun -s

2、修改vite.config.ts文件

···
// 引入qiankun
import qiankun from 'vite-plugin-qiankun'
export default defineConfig({
	plugins: [
	    vue(),
	    // 如下添加代码
	    qiankun('vue3-1', {
	      useDevMode: true
	    })
	],
	···,
	server: {
	    ···,
	    // 如下添加代码
	    headers: {
	      'Access-Control-Allow-Origin': '*', // 主应用获取子应用时跨域响应头
	    },
    }
})

3、修改index.html文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
  	<!-- <div id="app"></div> -->
    <div id="c1"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

4、修改main.ts

import {createApp } from 'vue'
import app from './App.vue'

import router from './router'

import './assets/main.css'

import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper'

let root: any;

function render(props: any) {
  const { container } = props;
  root = createApp(app)
  root.use(createPinia())
  root.use(router)
  const c = container
    ? container.querySelector("#c1")
    : document.getElementById("c1")
  root.mount(c)
}

renderWithQiankun({
  async mount(props) {
    render(props);
  },
  bootstrap() {
    console.log("bootstrap");
  },
  unmount(props: any) {
    console.log("vue3sub unmount");
    root.unmount();
  },
  update(props: any) {
    console.log("vue3sub1 update");
    console.log(props)
  },
});
// 若非使用为qiankun子项目，则可以作为一个单独的项目
if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
  render({});
}

5、路由配置

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/c1/home',
      name: 'home',
      component: HomeView
    },
    {
      path: '/c1/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('../views/AboutView.vue')
    }
  ]
})

export default router

测试

在app.vue内添加如下代码，可点击查看跳转效果

<RouterLink to='/c1/home'>c1-home</RouterLink>
<RouterLink to='/c1/about'>c1-about</RouterLink>