外贸公司建网站一般多少钱,网站建设拍金手指排名贰拾,网站正在维护中 模板,专业建站分销商城文章目录 微前端理解1、微前端概念2、微前端特性3、微前端方案a、iframeb、qiankun -- 使用比较复杂 -- 自己写对vite的插件c、micro-app -- 京东开发 -- 对vite支持更拉跨d、EMP 方案-- 必须使用 webpack5 -- 很多人感觉不是微前端 -- 去中心化方… 文章目录 微前端理解1、微前端概念2、微前端特性3、微前端方案a、iframeb、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就是你子应用跑起来的时候的地址
但是正如菜鸟标识的发现 webpackvue3 的并不能正常显示问了小满大佬才发现是跨域的问题
应用跨域问题解决 在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-pxtoremexport 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 都是对的所以可以不用写
菜鸟暂时只有这两个问题然后就迁移成功了至于跳转的任务被延后所以暂时不写了
后续会更新……
