vue项目微前端试水
2024-06-08 16:21:28
文章目录
- 微前端概念
- 主应用(安装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 lifecycle functions in tangram entry
- 2. Application died in status NOT_MOUNTED: Target container with #container not existed while xxx loading!
- 3. 主应用的某个路由页面加载微应用
- 4. 子应用404
微前端概念
抽离系统模块，独立开发，独立部署，独立运行、可以集成，可以解耦。（将前端应用分解成更小、更简单，但用户看来仍是内聚的产品）
- 微前端概念示意图
- 微前端实现逻辑
主应用(安装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配置问题
vue项目微前端试水相关推荐
- vue简易微前端项目搭建（一）：项目背景及简介
github传送门: 1.h5主项目 2.项目脚手架 3.子项目模板 系列文章传送门: vue简易微前端项目搭建(一):项目背景及简介 vue简易微前端项目搭建(二):子项目模板及项目脚手架搭建 vu ...
- vue简易微前端项目搭建（二）：子项目模板及项目脚手架搭建
github传送门: 1.h5主项目 2.项目脚手架 3.子项目模板 系列文章传送门: vue简易微前端项目搭建(一):项目背景及简介 vue简易微前端项目搭建(二):子项目模板及项目脚手架搭建 vu ...
- 基于Vue实现微前端
基于Vue实现微前端 前言 痛点 方案 iframe嵌入 原生html嵌入 模块化嵌入 前端微服务化一直是前端社区的一个热门话题,早在2018年就有不少开发者提出过各种解决方案.或许是未得精髓, ...
- vue项目实现前端权限控制
前端权限的意义 1.前端权限就是控制前端的视图层的展示和前端所发送的请求. 2. 前端权限的控制,主要由这几方面的好处 (1)降低非法早操作的可能性 (2)提高用户体验 (3)尽可能排除不必要的请求, ...
- 微前端：使用qiankun框架从 0-1 搭建vue构成微前端项目
第一步:新建项目 新建 main 主应用和两个使用 vue/cli 创建的子应用 vue create main vue create vue2-app-1 vue create vue2-app-2 ...
- 经验之谈-关于实际项目微前端优化
点击上方 前端Q,关注公众号 回复加群,加入前端Q技术交流群 场景 一个在某某行业为运营商提供服务的科技公司 首先会开发一个关于机器各种功能的运营系统(机器中心) next,要为供应商提供数据分析的系 ...
- 爱奇艺基于 Vue 的微前端架构实践
点击上方"开发者技术前线",选择"星标" 18:50 在看 真爱 来自:爱奇艺技术产品团队 前言 近来,微前端的概念非常火爆,那么什么是微前端架构?微前端架构是 ...
- vue项目实现前端预览word和pdf格式文件
最近做vue项目遇到一个需求,就是前端实现上传word或pdf文件后,后端返回文件对应的文件流,前端需要在页面上展示出来.word预览简单一些,pdf预览我试过pdfjs,vue-pdf总是报各种奇奇 ...
- 微视频试水社交网站 渐趋移动互联应用
与微视频/微电影的流行同步进行的是社交网络的兴起,微博成为比即时通讯更热门的交流工具,在微博界面能添加视频,这无疑给微电影一个爆发的平台.社交网络里的传播行为毫不保留地在微视频/微电影上体现和延伸. ...
最新文章
- springcloud config 分布式配置中心
- 【学习笔记】Tableau基础介绍
- Python——验证码识别 安装Pillow、tesseract-ocr与pytesseract模块的安装以及错误解决
- mondrian olap 示例_详解OLAP概念、基本内容、特点、分类
- 决策树算法的应用python实现_决策树ID3和C4.5算法Python实现源码
- python简明教程_01
- php 上传微信媒体,关于微信公众号API多媒体上传
- html整体居中文字,html文字居中 html图片居中代码
- 10.3注意力的评价函数
- 微信公众号里面使用定位
- html静态资源加载404,spring security访问静态资源文件出现404
- 推荐一个微软知识库(Microsoft Knowledge Base)订阅
- 京东商品列表API接口-（item_search-按关键字搜索京东商品API接口），京东API接口
- 【转】理解分布式账本技术： 经济学视角
- RSS是什么意思?(转)
- 怎么自制小程序？【自己制作小程序】
- 雨林木风 Ghost XP SP2 纯净版 Y3.0
- 从艾优尼之死，看Freeme OS的深远价值
- 小傻蛋的妹妹跟随小甲鱼学习Python的第三节003
- 单反相机的传奇—佳能单反50年辉煌之路(连载三)