背景

• 技术栈无关
  主框架不限制接入应用的技术栈，微应用具备完全自主权

• 独立开发、独立部署
  微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新

• 增量升级

  在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略

• 独立运行时
  每个微应用之间状态隔离，运行时状态不共享

主项目配置

第一步

安装qiankun

$ yarn add qiankun # 或者 npm i qiankun -S

第二步

在app.vue中使用

<template>
      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
        <RouterLink to="/qiankun/project1">乾坤子1</RouterLink>
      </nav>
    </div>
    <----展示qiankun页面的地方------>
  <div id="containerChirden"></div>
  <RouterView />
</template>

<script setup name="app">
import { RouterLink, RouterView  } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
import {registerMicroApps, start} from 'qiankun'
import { reactive } from 'vue'

//子应用列表
let apps = reactive([
    {
      name:'project1',
      entry:'//localhost:8080/',//子应用的地址，这里演示是本地启动的地址。
      container:'#containerChirden',//子应用的容器节点的选择器（vue一般为app）
      activeRule:'/qiankun/project1',//访问子应用的规则，比如：主应用为localhost:8081，那访问该子应用的url应为localhost:8081/subapp
    }
  ])
   
//注册子应用
registerMicroApps(apps);

//启动
start();

</script>

子项目配置

在子项目Main.js中使用

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false




if (window.__POWERED_BY_QIANKUN__) {
  // eslint-disable-next-line
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

let instance = null;
function render(props = {}) {
  const { container } = props;

  instance = new Vue({
    render: (h) => h(App),
  }).$mount(container ? container.querySelector('#app') : '#app');
}

// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

export async function bootstrap() {
  console.log('[vue] vue app bootstraped');
}
export async function mount(props) {
  console.log('[vue] props from main framework', props);
  render(props);
}
export async function unmount() {
  instance.$destroy();
  instance.$el.innerHTML = '';
  instance = null;
}





new Vue({
  render: h => h(App),
}).$mount('#app')

这样点击会有跨域问题，解决办法在vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  devServer:{
  
  添加以下代码，设置请求头
    headers: {
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Credentials': 'true',
          },
          
  },
  transpileDependencies: true,
  lintOnSave: false,
})