微前端qiankun框架使用示例

微前端qiankun框架使用示例

新建两个项目作为示例，qiankun-base（vue）作为主应用（基座），qiankun-vue（vue）作为子应用。

一、创建基座应用

1、初始化基座项目源码

vue create qiankun-base

2、引入qiankun插件

npm install qiankun -S

3、在main.js中添加配置

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

import { registerMicroApps, start } from 'qiankun';
registerMicroApps([
  {
    name: 'vueApp', // 应用名称
    entry: '//localhost:8082', // 默认会加载这个html 解析里面的js 动态的执行 （子应用必须支持跨域）fetch
    container: '#vue', // 容器名（此项目页面中定义的容器id，用于把对应的子应用放到此容器中）
    activeRule: '/vue', // 激活的路径
    // props: {actions}
  },
]);
// 启动 qiankun
start({
    prefetch: false // 取消预加载
});

Vue.config.productionTip = false

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

4、在一个vue组件里面定义一个子应用的容器，我这里是在App.vue中

<template>
  <div id="app">
    <h1>主应用</h1>
    <router-view />
    <div id="vue"></div>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {
    // HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

5、修改路由模式，使用history模式

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

二、创建vue子应用

1、初始化vue子应用源码

vue create qiankun-vue

2、引入qiankun插件

npm install qiankun -S

3、修改路由文件

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import testVue from "../views/test.vue"

Vue.use(VueRouter)

const routes = [{
    path: '/',
    name: 'home',
    component: HomeView
},{
    path: "/test",
    name: "test",
    component: testVue
}]
export default routes

4、main.js中新增qiankun相关配置

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes  from "./router"
import App from './App.vue'
import actions from './utils/actions'

Vue.config.productionTip = false

let router = null;
let instance = null;
function render(props = {}) {
  if(props){
    actions.setActions(props)
  }	
  const { container } = props;
  // base在qiankun环境下，需要和基座主应用里面对应的activeRule激活子应用的路径一致
  router = new VueRouter({
    base: window.__POWERED_BY_QIANKUN__ ? '/vue/' : process.env.BASE_URL,
    mode: 'history',
    routes,
  });
 
  instance = new Vue({
    router,
    render: (h) => h(App),
  }).$mount(container ? container.querySelector('#app') : '#app');
}
 
 
 
if (window.__POWERED_BY_QIANKUN__) { // 动态添加publicPath
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
if (!window.__POWERED_BY_QIANKUN__) { // 默认独立运行
  render();
}
 
// 父应用加载子应用，子应用必须暴露三个接口：bootstrap、mount、unmount
// 子组件的协议就ok了
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;
  router = null;
}

5、修改vue.config.js相关配置

publicPath的值：是打包上线后应用的访问名称

const { defineConfig } = require('@vue/cli-service')
const { name } = require('./package');
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: process.env.NODE_ENV == "development" ? "/" : "/app/",
  lintOnSave: false,
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
  configureWebpack: {
    output: {
      library: `${name}-[name]`,
      libraryTarget: 'umd', // 把微应用打包成 umd 库格式
      chunkLoadingGlobal: `webpackJsonp_${name}`, // webpack 5 需要把 jsonpFunction 替换成 chunkLoadingGlobal
    },
  },
})

三、完成在主应用中接入子应用

1、在vue文件中写入跳转方法

<template>
  <div>
    <button @click="handle1">点击跳转子应用</button>
  </div>
</template>
<script>
export default {
    data() {
        return {
        }
    },
    methods: {
        handle1() {
            this.$router.push("/vue"); //跳转到vue子应用中
        },
    }
}
</script>
<style lang='less' scoped>

</style>

四、打包部署测试

1、由于项目中路由是用的是history模式，打包后直接访问系统会出现路由404问题，需要服务器端做相关配置

2、在这里我选择的是nginx部署，主应用部署在根目录下，配置如下：

3、子应用nginx部署为非根目录，配置如下：

这里的名称app和子应用vue.config.js中配置的publicPath一致