无界构建微前端？NO！NO！NO！多系统融合思路！

server/2025/2/9 9:50:08/

文章目录

    • 微前端理解
      • 1、微前端概念
      • 2、微前端特性
      • 3、微前端方案
        • a、iframe
        • b、qiankun --> 使用比较复杂 --> 自己写对vite的插件
        • c、micro-app --> 京东开发 --> 对vite支持更拉跨
        • d、EMP 方案--> 必须使用 webpack5 --> 很多人感觉不是微前端 --> 去中心化方式去共享模块，更像拆包
        • e、无界
    • 安装无界
    • 使用
    • 应用跨域问题解决
    • 无界的槽点
    • 硬着头皮换思路
    • 问题一：pxtorem
      • 注意
    • 问题二：区分环境
      • 注意
    • 菜鸟暂时只有这两个问题，然后就迁移成功了，至于跳转的任务被延后，所以暂时不写了！

菜鸟最近遇见的一个公司的规划需求：

公司想把全部的系统合并，使其只用一个登录，就可以访问全部的系统！避免系统太多，导致别人使用负担加大！

菜鸟刚开始做这个就想到了微前端，规划了好久，现在才有空来研究！

注：本文是个人思路的展现，并非技术介绍文章，不感兴趣可以划走！

微前端理解

1、微前端概念

微前端是借鉴了微服务的理念，将一个庞大的应用拆分成多个独立灵活的小型应用，每个应用都可以独立开发，独立运行，独立部署，还可以随意组合，这样就降低了耦合度，从而更加灵活。

2、微前端特性

在这里插入图片描述

3、微前端方案

a、iframe

在这里插入图片描述

b、qiankun --> 使用比较复杂 --> 自己写对vite的插件

在这里插入图片描述

c、micro-app --> 京东开发 --> 对vite支持更拉跨

在这里插入图片描述

注:

适配 vite 需要写很多代码，有些还要改，而且会失去很多功能！

d、EMP 方案–> 必须使用 webpack5 --> 很多人感觉不是微前端 --> 去中心化方式去共享模块，更像拆包

在这里插入图片描述

e、无界

在这里插入图片描述

更多见我的b站笔记：https://www.bilibili.com/opus/934644514948120594

安装无界

无界的使用相对简单，随便创建一个应用然后安装即可

在这里插入图片描述

这里直接使用的是作者进一步封装后的无界，更加简单！

使用

安装完成后就可以使用了，也是非常简单，直接 main.js 中引入即可，然后就可以在vue文件中直接当成组件使用

在这里插入图片描述

在这里插入图片描述

这里的url就是你子应用跑起来的时候的地址！

但是正如菜鸟标识的，发现 webpack+vue3 的并不能正常显示，问了小满大佬才发现是跨域的问题！

应用跨域问题解决

在这里插入图片描述

在webpack中添加这个配置，就可以出现了。

但是还有很多问题，菜鸟确实解决不了！

无界的槽点

无界使用的人还是太少，遇见问题没办法搜到，只能问大佬，但是 大佬回你是情分，不回才是本分！菜鸟在b站上跟着小满zs大佬学的无界，也顺利加上了大佬。但是问了两个问题后，可能大佬就要忙自己的事情，没时间回答，菜鸟也就识趣的自己研究，然后研究很长时间，也不是很理解为什么，就发沸点问jym了！

沸点见：https://juejin.cn/pin/7451432113994825766

加了无界的群，问的问题也没人有反应！

硬着头皮换思路

菜鸟想着反正后端也要做 sso，不如就直接把一个系统当主系统，其他的都当链接放进来得了，跳转过去的时候携带token！

正好有一个集合了很多小的功能的系统在重构，所以就将其作为主系统了！后端使用了若依，所以前端也直接使用若依这个框架了！

所以大致的思路就变成了这样了

在这里插入图片描述

这个基本就很简单，但是项目重构还是遇见了很多问题，这里就继续做记录了！

问题一：pxtorem

菜鸟之前一直都是用 webpack 的 pxtorem，详见：px2rem不生效，但若依是vite开发的，所以菜鸟必须得解决这个插件迁移的问题！

这里就不展示解决流程了，反正就是不断尝试+GPT！菜鸟个人感觉vite使用pxtorem更加简洁，因为vite原生对postcss有支持，所以直接下载一个插件postcss-pxtorem即可：

npm i postcss-pxtorem -D

配置这里和 webpack 很大的不同

import postCssPxToRem from 'postcss-pxtorem'export default defineConfig(({ mode, command }) => {return {css: {postcss: {plugins: [// 若依作者写的{postcssPlugin: 'internal:charset-removal',AtRule: {charset: (atRule) => {if (atRule.name === 'charset') {atRule.remove()}}}},// pxtorem 配置postCssPxToRem({rootValue: 37.5,propList: ['*'], // 指定哪些 CSS 属性的 px 单位需要被转换为 remreplace: true, // 控制是否 直接替换原来的 px 单位mediaQuery: false, // 是否将媒体查询中的 px 转换为 rem，会把max-width改成rem，建议为falseminPixelValue: 2,exclude: (file) => {// console.log('File path:', file) // 打印实际传入路径// console.log('Exclude:', !file.includes('editform')) // 打印排除结果return !file.includes('editform') // 保留 editform 目录}})]}}}
})

注意

这里菜鸟的用法和大部分情况不一样，菜鸟这里只需要对一个界面进行适配，其他界面都是采用若依适配的就行，所以需要过滤file。但是 postCssPxToRem 这个插件没有 include 属性，所以只能通过 exclude的 ! 来取出。

这里需要注意，不能这样写：

exclude: (file) => {return !file.includes(path.resolve(__dirname, 'src/views/manage/editform'));
}

反正菜鸟打印出来，里面 file 和这个path.resolve(__dirname, 'src/views/manage/editform')生成的路径不一样，一个是\，一个是/，且你还改不了！

界面引入 lib-flexible，哪里使用就哪里引入就行

import 'lib-flexible'

这里有个坑，就是虽然这个 lib-flexible 成功引入了，但是不知道是若依还是什么搞的鬼，一直显示body的font-size是12px。可以自己重新监听查看：

// 监听界面大小变化
window.addEventListener('resize', () => {console.log('Current rem base value (font-size):', document.documentElement.style.fontSize)
})

问题二：区分环境

菜鸟使用若依，才感觉原来环境区分清楚还是一劳永逸的事情，且运行不同的 npm 命令就运行不同的结果还是很有必要的！

这里把常用的几种文件列出来：

在这里插入图片描述

运行命令

"scripts": {"dev": "vite --mode development","test": "vite --mode test","prod": "vite build --mode production","build:dev": "vite build --mode development","build:test": "vite build --mode test","build:prod": "vite build --mode production"
}

proxy配置

server: {port: 80,host: true,open: true,proxy: {// 开发环境请求 --> 菜鸟这里直接请求的测试环境'/dev-api': {target: 'http://xxx.xx.xx.xx:23000/test-api/',changeOrigin: true,rewrite: (p) => p.replace(/^\/dev-api/, '')},// 测试环境请求'/test-api': {target: 'http://xxx.xx.xxx.xx:23000/test-api/',changeOrigin: true,rewrite: (p) => p.replace(/^\/test-api/, '')},// 特殊的 --> 菜鸟这个系统是跨系统的，某个界面需要调另一个系统的接口'/CRM': {target: 'http://xxx.xx.xxx.xx:18000/', // crmchangeOrigin: true, // 如果接口跨域，需要进行这个参数配置rewrite: (p) => p.replace(/^\/CRM/, '')}}
}

注意

这里的 --mode 后面的并非是运行的 NODE_ENV 值，而是让你去找哪一个 .evn.xxxx 文件的！

所以这里有个坑，就是运行 build:test 执行时的 NODE_ENV 依旧还是 production ，而非test！这里需要在 .env.test 文件中添加这样一行！

VITE_NODE_ENV= 'test'

内容大致都是这样（需要什么加什么）

在这里插入图片描述

不过 production 和 development 的 VITE_NODE_ENV 都是对的，所以可以不用写！

菜鸟暂时只有这两个问题，然后就迁移成功了，至于跳转的任务被延后，所以暂时不写了！

后续会更新……


http://www.ppmy.cn/server/166190.html

相关文章

Linux 常用命令与实战教程

Linux 常用命令与实战教程

Linux 常用命令与实战教程 引言 Linux 是一个强大的开源操作系统，广泛应用于服务器、嵌入式系统、个人计算机等多个领域。其灵活性、稳定性和安全性使其成为开发人员和运维工程师的首选操作系统之一。对于开发者而言，熟练掌握 Linux 命令行不仅能提高工…
阅读更多...
Python-基于PyQt5,Pillow,pathilb,imageio,moviepy,sys的GIF(动图)制作工具(进阶版)

Python-基于PyQt5,Pillow,pathilb,imageio,moviepy,sys的GIF(动图)制作工具(进阶版)

前言：在抖音，快手等社交平台上，我们常常见到各种各样的GIF动画。在各大评论区里面，GIF图片以其短小精悍、生动有趣的特点，被广泛用于分享各种有趣的场景、搞笑的瞬间、精彩的动作等，能够快速吸引我们的注意…
阅读更多...
DeepSeek：开启本地化 AI 大模型应用新时代

DeepSeek：开启本地化 AI 大模型应用新时代

DeepSeek 强大的性能表现数据安全与隐私保障灵活定制与个性化应用易于本地化部署 在人工智能飞速发展的当下，大语言模型已成为推动各领域创新变革的核心力量。DeepSeek 作为一款备受瞩目的大模型，以其卓越的性能和独特的优势，在 AI 领域崭露头…
阅读更多...
【人工智能】解码语言之谜：使用Python构建神经机器翻译系统

【人工智能】解码语言之谜：使用Python构建神经机器翻译系统

《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门！ 解锁Python编程的无限可能：《奇妙的Python》带你漫游代码世界 神经机器翻译（NMT）是近年来机器翻译领域的一项重大突破。它利用深度学习模型，特别是循环神经网络（RNN）和Transformer网络，以端到端的…
阅读更多...
手写一个C++ Android Binder服务及源码分析

手写一个C++ Android Binder服务及源码分析

手写一个C Android Binder服务及源码分析 前言一、 基于C语言编写Android Binder跨进程通信Demo总结及改进二、C语言编写自己的Binder服务Demo1. binder服务demo功能介绍2. binder服务demo代码结构图3. binder服务demo代码实现3.1 IHelloService.h代码实现3.2 BnHelloService.c…
阅读更多...
Python 数据挖掘与机器学习

Python 数据挖掘与机器学习

模块一：Python编程 Python编程入门 1、Python环境搭建 2、如何选择Python编辑器？ 3、Python基础 4、常见的错误与程序调试 5、第三方模块的安装与使用 6、文件读写（I/O） Python进阶与提高 1、Numpy模块库 2、Pandas模块…
阅读更多...
本地化部署 AI 的第一步，认识和使用 ollama

本地化部署 AI 的第一步，认识和使用 ollama

Ollama 是什么？ Ollama 是一个本地运行 AI 大模型的工具，让你在自己的电脑上使用像 ChatGPT 这样的 AI，而 不需要联网，也不需要强大的服务器。 它有什么用？ 如果你想在电脑上运行 AI 聊天机器人、写作助手、代码助手…
阅读更多...
Python中3个与众不同的运算符 :=海象 -＞箭头 //地板除法运算符

Python中3个与众不同的运算符 :=海象 -＞箭头 //地板除法运算符

在python中，有一些和其他编程语言不太一样的运算符，今天就给大家介绍几种。 1. 海象（walrus）运算符 : 这个运算符用来分配值并同时返回变量 (a : 5) print(a) # 5 它还允许我们在许多情况下避免重复语句。我们可以在表达式的…
阅读更多...
最新文章

Copyright @ 2022~2023