vue项目微前端试水
程序员文章站
2022-06-27 22:55:50
文章目录微前端概念主应用(安装qiankun)1.存放注册的微应用2.注册微应用3.启动微应用微应用(无需安装依赖)1.修改运行时的public-path 主要解决的是微应用动态载入的 脚本、样式、图片 等地址不正确的问题。2.导出主应用需要的三个声明周期函数3.配置4.子应用路由需添加前缀为什么不使用iframe?问题1. application 'tangram' died in status LOADING_SOURCE_CODE: [qiankun] You need to export life...
微前端概念
抽离系统模块,独立开发,独立部署,独立运行、可以集成,可以解耦。(将前端应用分解成更小、更简单,但用户看来仍是内聚的产品)
- 微前端概念示意图
- 微前端实现逻辑
主应用(安装qiankun)
1.存放注册的微应用
- 当微应用信息注册完之后,一旦浏览器的 url 发生变化,便会自动触发 qiankun 的匹配逻辑,所有 activeRule 规则匹配上的微应用就会被插入到指定的container 中,同时依次调用微应用暴露出的生命周期钩子。
//1.src/micros/apps.js
const apps = [
/**
* name: 微应用名称 - 具有唯一性
* entry: 微应用入口 - 通过该地址加载微应用
* container: 微应用挂载节点 - 微应用加载完成后将挂载在该节点上
* activeRule: 微应用触发的路由规则 - 触发路由规则后将加载该微应用
*/
{
name: "VueMicroApp",
entry: "//localhost:10200",
container: "#iframe",
activeRule: "/#/vue"
}
];
export default apps;
2.注册微应用
一般主应用、子应用的路由模式保持一致
//2.src/micros/index.js
import { registerMicroApps, start } from "qiankun";
import apps from "./apps";
/**
* @description: 注册微应用
* 第一个参数 - 微应用的注册信息
* 第二个参数 - 全局生命周期钩子
*/
registerMicroApps(apps);
/**
* @description: 导出启动函数
*/
export default start;
3.启动微应用
//3.src/main.js
import startQiankun from "./micros";
startQiankun();
微应用(无需安装依赖)
1.修改运行时的public-path 主要解决的是微应用动态载入的 脚本、样式、图片 等地址不正确的问题。
//在 src 目录新增 public-path.js:
if (window.__POWERED_BY_QIANKUN__) {
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
2.导出主应用需要的三个声明周期函数
//src/main.js
import "./public-path"
import Vue from "vue";
import VueRouter from "vue-router";
import router from "./router";
Vue.use(VueRouter);
let instance = null;
/**
* 渲染函数
* 两种情况 主应用中启动/微应用单独启动
*/
function render() {
//挂载应用
instance = new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
}
// 独立运行时,直接挂载应用
if (!window.__POWERED_BY_QIANKUN__) {
render();
}
/**
* bootstrap 只会在微应用初始化的时候调用一次,下次微应用重新进入时会直接调用 mount 钩子,不会再重复触发 bootstrap。
* 通常我们可以在这里做一些全局变量的初始化,比如不会在 unmount 阶段被销毁的应用级别的缓存等。
*/
export async function bootstrap() {
console.log("VueMicroApp bootstraped");
}
/**
* 应用每次进入都会调用 mount 方法,通常我们在这里触发应用的渲染方法
*/
export async function mount(props) {
console.log("VueMicroApp mount", props);
render(props);
}
/**
* 应用每次 切出/卸载 会调用的方法,通常在这里我们会卸载微应用的应用实例
*/
export async function unmount() {
console.log("VueMicroApp unmount");
instance.$destroy();
instance = null;
}
3.配置
注意:需配置disabledHostCheck和允许跨域 否则报错
//vue.config.js
const path = require('path');
const packageName = require('./package.json').name;
module.exports = {
devServer: {
// 监听端口
port: 10200,
// 关闭主机检查,使微应用可以被 fetch,否则会提示生命周期未注册
disableHostCheck: true,
// 配置跨域请求头,解决开发环境的跨域问题
headers: {
'Access-Control-Allow-Origin': '*',
},
},
configureWebpack: {
output: {
// 微应用的包名,这里与主应用中注册的微应用名称一致
library: `${packageName}-[name]`,
// 将你的 library 暴露为所有的模块定义下都可运行的方式
libraryTarget: 'umd',
// 按需加载相关,设置为 webpackJsonp_VueMicroApp 即可
jsonpFunction: `webpackJsonp_${packageName}`,
}
}
}
4.子应用路由需添加前缀
// 判断是 qiankun 环境则增加路由前缀
if (window.__POWERED_BY_QIANKUN__) {
prefix = "/vue";
}
//前缀跟主应用规则匹配时保持一致
routes: [
{
path: prefix + "/",
name: "home",
redirect: prefix + "/toolbox"
}]
为什么不使用iframe?
- iframe的隔离性导致应用间上下文无法共享
- 慢。每次子应用进入都是一次资源重新加载、浏览器的渲染
- 浏览器前进后退
- ……
问题
1. application ‘tangram’ died in status LOADING_SOURCE_CODE: [qiankun] You need to export lifecycle functions in tangram entry
- 检查生命周期钩子是否配置
- webpack相关配置
- 微应用的名字
2. Application died in status NOT_MOUNTED: Target container with #container not existed while xxx loading!
- start函数调用时机不对
- 检查容器dom是否存在主应用的某个子路由下。
3. 主应用的某个路由页面加载微应用
通过*方式才可以使微应用里的子路由被识别到
1. 主应用注册这个路由时给 path 加一个 *,注意:如果这个路由有其他子路由,需要另外注册一个路由,任然使用这个组件即可。
const routes = [
{
path: '/portal/*',
name: 'portal',
component: () => import('../views/Portal.vue'),
}
]
2. Portal.vue
import { start } from 'qiankun';
export default {
mounted() {
if (!window.qiankunStarted) {
window.qiankunStarted = true;
start();
}
},
}
4. 子应用404
- 可能是public-path配置问题
本文地址:https://blog.csdn.net/cyyy1223/article/details/111995277
推荐阅读
-
vue-cli构建项目下使用微信分享功能
-
Vue项目history模式下微信分享总结-个人文章-SegmentFault思否
-
解决vue+springboot前后端分离项目,前端跨域访问sessionID不一致导致的session为null问题
-
vue项目中实现的微信分享功能示例
-
[Vue 牛刀小试]:第十六章 - 针对传统后端开发人员的前端项目框架搭建
-
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
-
Vue项目history模式下微信分享爬坑总结
-
基于vue-cli vue-router搭建底部导航栏移动前端项目
-
微信试水付费图文阅读:原创文章花钱才能阅读全文
-
前端项目优化 -Web 开发常用优化方案、Vue & React 项目优化