微前端qiankun（vue）使用教程

前言

目前前端的技术更新迭代是非常快的，2021年年初我才了解到微前端这个概念，可能是我信息不够灵通，如今很多公司已经使用到了微前端技术，至于今天我也学习一下qiankun了。至于微前端这个概念以我的了解通俗说一下：微前端就是页面的某个功能独立一个项目开发、部署。比如：自己的项目使用iframs引入百度网站去使用一样。

工具使用版本

• npm –> 6.14.13
• node –> 14.17.3
• @vue/cli –> 4.5.13

创建主应用

创建文件夹vue-qiankun。创建主应用和子应用都是在该文件夹创建

vue脚手架创建应用命令：

执行命令：

vue create mian
复制代码

选择第二个（本人直接使用cmd，使用Git Bash Here是不能选择的）

安装成功：

创建子应用

创建子应用和创建主应用的方法一样，就是项目名称不一样。
本人主应用的文件夹名称为mian，子应用名称为subapp。

文件夹详情：

主应用安装qiankun

安装命令:

npm i qiankun -S
复制代码

package.json

{
  "name": "main",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "qiankun": "^2.4.10", //乾坤
    "vue": "^2.6.11"
  },
  //省略....
}

复制代码

主应用配置

main.js

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

Vue.config.productionTip = false


//qiankun配置
import { registerMicroApps, start } from 'qiankun';

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

//注册子应用
registerMicroApps(apps);

//启动
start();

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

子应用配置

根目录创建public-path.js文件

//public-path.js

if (window.__POWERED_BY_QIANKUN__) {
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
复制代码

mian.js

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

Vue.config.productionTip = false

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;
}
复制代码

本地启动主应用和子应用

这里先启动子应用，因为主应用的main.js的apps设置的是8080端口。

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

测试

访问主应用：http://localhost:8081/

访问子应用：http://localhost:8081/subapp

噢！访问不成功，还是在主应用页面。来了个跨域报错。

解决跨域问题

qiankun官网早就给出来了

我们创建文件然后copy一下，重新启动主应用和子应用。

重新访问子应用

总结

qiankun的官方文档还是挺详细的，本次的教程只是一个小小的入门教程，更多的困难还在后面，比如打包一些问题，还是学要我们掉头发地去探索的。我觉得qiankun给前端带来很好的项目管理，多个项目不用放在一个项目目录里面，还可以使用多个UI去开发。总而言之就是方便，特别是老项目。不知道有没有大神有旧项目改造为微前端的教程。