Vite 模板语法
场景 当一套代码,需要发布到两个环境( A环境 和 B环境 )中时,A环境 下需要系统管理页面,B环境 下不需要系统管理页面。这时,我们可以通过后端返回的菜单控制。 但是如果 A环境 和 B环境 的登录页面也不一样呢?这时,我们就可能需要模板语法来控制。 需要自定义一个 vite 插件,在打包前,读取环境变量,然后使用 blueimp-tmpl 的模板语法对代码进行判断并替换。 项目地址实践安装依赖 blueimp-tmpl 模板语法 1npm install blueimp-tmpl cross-env 跨环境执行命令 1npm install cross-env -D 获取环境变量 在 package.json 文件中添加 scripts 脚本 12345678"scripts": { "dev": "npm run dev:A", "dev:A": "cross-env platform=A vite", "dev:B":...
Qiankun 常见问题
Qiankun-Vite 插件 Qiankun 默认不能接入 Vite ,需要使用 vite-plugin-qiankun 插件,但是这个插件目前不支持 Qiankun的样式隔离 和 React的热更新 推荐使用 vite-plugin-qiankun-lite 插件,解决了上面的问题,并且简化了配置 Node 版本问题 Node 16 使用 vite-plugin-qiankun 插件启动时会报错 ReferenceError: ReadableStream is not defined,需要更改 cheerio 的版本(注意不要带 ^ 符号),详见:cheerio upgrade problem 123"devDependencies": { "cheerio": "1.0.0-rc.12"} Node 16 使用 Vite 时,也需要更改版本(其他版本也可自行尝试) 123"devDependencies": { "vite":...
React 原理浅析
前言 强烈推荐这篇文档 Build your own React !!!有动画和解释,能更好地理解 React 的原理 Github 仓库地址 也可以参考:React 核心原理浅析 参考文章:【鸣谢】 Build your own React React 核心原理浅析
Docker Compose 部署单机版 Nacos
Docker Compose 安装 前提准备版本说明 mysql:8.0.31 nacos/nacos-server:v2.2.2 spring-boot 2.6.13 spring-cloud 2021.0.5 spring-cloud-alibaba 2021.0.5.0 目录结构 获取 nacos 配置文件 拉取镜像 1docker pull nacos/nacos-server:v2.2.2 启动服务(这个服务能运行就行,主要是为了拷贝文件) 1docker run -d --name nacos -e mode=standalone -d -p 8848:8848 nacos/nacos-server:v2.2.2 从容器中复制所需文件到宿主机中 1234567# docker cp 容器名:文件 宿主机文件# 拷贝 logs 文件docker cp nacos:/home/nacos/logs/ /opt/docker/nacos/# 拷贝 conf 文件夹docker cp nacos:/home/nacos/conf/...
Qiankun 打包优化
文章参考下面两个 issues:提取公共依赖 doc、qiankun 如何复用公共依赖 思路 方式一:通过 CDN 引入公共依赖,并在 主子应用 中排除这些公共依赖。(如果 CDN网站 挂了,网站也就挂了,有风险) 方式二:将 CDN 资源下载到 public 文件夹下,并在 主子应用 中排除这些公共依赖 一般来说,只需要在 主应用 中引入即可,子应用 会复用主应用的资源,这个时候子应用单独访问(直接通过 http://localhost:8001/ 访问,而不是主应用路由点击)会报错,因为缺少依赖 如果需要 子应用 可以单独访问(直接通过 http://localhost:8001/ 访问,而不是主应用路由点击),那么也需要在 子应用 中引入,需要用到 ignore 关键字 项目地址创建项目初始化项目 项目目录结构 12345678910111213141516171819202122232425262728|── 项目根目录│ ├── packages # 包目录│ │ ├── app ...