阅读 2270
微前端qiankun(vue)使用教程

微前端qiankun(vue)使用教程

微前端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是不能选择的)

image.png

安装成功:

image.png

创建子应用

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

文件夹详情:

image.png

主应用安装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
  }
]
复制代码

image.png

测试

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

image.png 访问子应用:http://localhost:8081/subapp

image.png

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

解决跨域问题

qiankun官网早就给出来了

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

重新访问子应用

image.png

源码链接

vue使用微前端框架(qiankun)

总结

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

文章分类
前端
文章标签