- 博客(87)
- 收藏
- 关注
RSS订阅原创 next.js 如何做中英文切换（详解）
摘要：文章分享了在Next.js 14.2.2应用中使用App路由模式实现国际化(i18n)的解决方案。重点解决了SSR环境下的多实例问题，提出服务器端和客户端应采用不同i18n处理策略：服务器端通过middleware处理路由语言切换，客户端应避免直接修改实例而应切换路由。提供了完整的代码实现，包括i18n实例创建、资源加载、Provider组件封装以及404页面的国际化处理方案。该方法遵循Next.js官方规范，使用react-i18next等核心库，支持多语言静态生成和动态加载翻译资源。（149字）
2025-05-30 09:50:23
261
原创 本地依赖库的版本和库依赖的版本不一致如何解决？
文章摘要： 本文分享了使用Yarn v4时解决依赖版本冲突问题的完整排查过程。作者遇到库XXXXXXXX版本匹配异常（0.0.1-local.8被当作^0.0.1-beta.29的合法候选项），通过逐步排查缓存、yarn.lock文件和npm registry，发现是远程registry中存在错误版本。最终给出三种解决方案：1）通过resolutions强制指定精确版本；2）切换官方npm源；3）检查可用版本并考虑发布新版本。该案例展示了Yarn依赖解析机制和semver版本的匹配逻辑，为类似问题提供了系统
2025-05-26 13:33:41
836
原创 Metamask SDK 未安装时打开的弹框卡死，点击没反应如何解决？？？
问题：因为有个弹出框组件在页面上，这个弹出框是 fixed 的定位在页面，发现无论如何改该弹框的层级都没有用，只有把弹框关掉才能点击 metamask 自己弹出的框框。具体不能点击的原因并不知晓，知道的人可以细细解释评论一下。# 如果是 react 项目。# 如果是 vue3 项目。
2025-04-30 09:43:31
247
原创 Unocss 类名基操, tailwindcss 类名
这里只列出 unocss 的可实现类名，tailwindcss 可以拿去试试用。unocss 一些不知道如何实现的类名。父元素移入，子元素改样式渐变色，背景图，修改子元素样式，动画，unocss grid-areas如何实现？选中子元素但是不包含最后一个移入后背景变色
2025-04-21 18:26:27
465
原创 css 在 hover 子元素时，不要让父元素触发 hover 效果
别人写的没看到一个能生效的，还是自己出吧。css 在 hover 子元素时，不要让父元素触发 hover 效果
2024-10-30 14:46:44
734
原创 Failed to fetch dynamically imported module
其实当我们打开 vue、react、vite 官网时，如果长时间不退出且不刷新页面，右下角就会弹出一个提示框，内容有更新，当我们点击这个按钮的时候，页面就会刷新一次，应该（我没去验证，猜的）也是一样的方法去实现内容更新的。所以当 用户A 在 /home 路由下访问 /dashboard 的时候，因为当前路由 /home 下使用的还是浏览器的缓存，所以 访问 /dashboard 用的也是旧的资源链接，进而引发出了报错。首先我们知道，用户在不刷新页面的情况下，访问的一定是缓存的代码。
2024-10-25 10:51:06
1392
原创 如何在数据太多时，解决卡顿问题，实现虚拟数据加载
如何在数据太多时，解决卡顿问题，实现虚拟数据加载，最近我用的 table 数据越来越多了，一旦导入数据就贼卡，发愁的过程去找了下虚拟加载的表格，因为都是组件，没法解决我其他需要虚拟加载的展示需求，网上例子不多，索性自己写一个吧。不依赖其他的库，只可以满足基本需求，有需要的拿去改吧。我习惯用 vue 开发，所以写一个 vue 的实现。简单测了一下，看上去 10万条数据也不会卡。在不改变表格任何内容的前提下，使用虚拟加载数据
2024-07-26 11:58:46
291
3
原创 如何制作正方形，给 placeholder 换颜色，多行省略号，纯css小三角，清除浮动，清除 margin，隐藏滚动条，隐藏 number 小图标
如何制作正方形，给 placeholder 换颜色，多行省略号，纯css小三角，清除浮动，清除 margin，隐藏滚动条，隐藏 number 小图标。
2024-05-24 18:50:08
228
原创 设置 sticky 不生效？会不会是你还是没懂 sticky？
就是不论你被谁包着，你只会往上找有 overflow 属性的盒子进行定位，包括：overflow:hidden;他外边的盒子是 100px 的高， 给他 position: sticky；比如这个橘色的小盒子，他的外边有一个盒子（红色），如果橘色的盒子会定位到滚动条盒子的地方，但是他的 bottom 不会低于包裹他的这个红色盒子。它的定位不超过滚动条元素的 top 位置，前提：不低于包裹自己的盒子！基本上可以看懂的就会知道。sticky 是相对于存在滚动条的内容的，啥意思？
2024-05-24 15:24:04
722
原创 如何在打印的时候显示调用函数的行号
后边发现，当库里边 throw 一个 Error 的时候，显示的行号并不是库的行，而是实际函数报错的位置 ，所以对 log 函数做一个简单的修改，让他可以打印日志，并且能显示调用的行号。但是实际使用中发现，虽然打印是没问题的，但是显示的行号却总是这个文件里的行号，导致我没法定位打印的位置。当下有这么一个需求，我要在 dev 环境下打印一些日志，所以我封装了一个函数，是这样的。
2024-05-10 13:39:01
300
原创 vue 写一个大富翁 和 老虎机组件
框架通过 yarn create vite 创建。可以直接拷贝 components 的三个组件使用。带动画，自由调整路线。
2023-10-18 20:25:00
842
1
原创 如何给第三方库打补丁？
下载的某个包有问题，只需要改少量的代码就可以正常运行比如要兼容浏览器，把 Buffer 改成 Uint8Array 之类的。又比如，库里的逗号多了一个，导致报错，库的作者发布要到几天之后，我要直接改库使用
2023-09-28 10:38:07
497
原创 使用yarn,依赖报各种错误怎么办
使用 yarn 下载的包，我们经常会看到很多依赖报错问题，真是又头疼又难受，因为想使用 yarn，但是这个报错又很难解决
2023-03-18 08:30:04
1952
原创 yarn init 没有 ts 类型声明
如果没有，请重新执行刚才的命令。其他编译器如果没有提示，可以先拿 vscode 12345试一试，如果不可以，那就去 yarn 的官网查看一下当前是否支持该扩展。yarn 版本为 3.+ 的初始化项目里，我们下载的包会发现没有 ts 类型提示。那么跟着我做这几个命令，就可以轻松搞定，具体原因我就不贴了，如果有兴趣可以评论问。没有最好是创建一个，有的人可能该全局的 setting.json ，这样不太好。如果没有 .vscode/settings.json 文件，那就创建一个。如果发现选择之后还是没有用。
2023-03-09 22:11:15
754
原创 使用 yarn，ts 提示 找不到模块“xxx”或其相应的类型声明
找不到模块“xxx”或其相应的类型声明Module "xxx" or its corresponding type declaration could not be found.pnp.cjs .pnp.loader.mjs
2023-02-13 12:48:50
1135
原创 error when starting dev server:Error: Failed to resolve vue/compiler-sfc.
error when starting dev server:Error: Failed to resolve vue/compiler-sfc.@vitejs/plugin-vue requires vue (>=3.2.25) to be present in the dependency tree.
2023-02-10 18:16:04
7193
1
原创 js 在 ios 上访问 WebViewJavascriptBridge 是 undefined
把下边这串代码执行一下就可以访问 window.WebViewJavascriptBridge 了。但是 ios 访问 WebViewJavascriptBridge 就是 undefined。安卓可以访问 WebViewJavascriptBridge。
2022-11-03 17:07:04
1466
原创 ‘v-slot‘ directive doesn‘t support any modifier
这个报错是说，v-slot 不支持任何修饰符意思是不让你这样写这个 xxx 就是修饰符它只允许你这样写。
2022-08-18 11:28:00
1791
原创 vite 多页面应用刷新页面时，不会在当前路由中，会返回到根路由
vite 多页面应用刷新页面时，不会在当前路由中，会返回到根路由多页面应用刷新问题
2022-07-27 17:33:03
1270
原创 vue 如何在 style 标签里使用变量（数据）
vue 如何在 style 标签里使用变量（数据）vue 如何在 代码中使用 style 属性vue 如何在 html 中使用 style 属性
2022-07-01 16:57:08
11782
原创 元素使用 align-items center 和 overflow auto 之后，部分内容显示不全
当我们为了让内容居中使用了 align-items center 属性之后，因为屏幕小的会遮挡一部分内容我们就会给盒子再加上 overflow-y auto 这个属性但是当我们缩小屏幕时，会发现，内容的上半部分会显示不出来 这是因为元素在侧轴居中。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同参考文档：align-items - CSS（层叠样式表） | MDN2. 将 display flex 改为 display grid...
2022-06-29 10:26:13
4109
5
原创 字符串之间的比较之 localeCompare
很多人比较字符串基本上都是用 > 或者 < 比较还有些人使用 localeCompare，但是你真的会用这个 原型方法 吗？这里举个例子来说明一下如何比较 字符串中的数字那么如果我们遇到这种情况，其实 localeCompare 这个方法还提供了很多参数来比较指定数值排序是否应该被使用，像是这样 "1" < "2" < "10"。可能的值是 和 指定是否优先对大写字母或小写字母排序。万能排序，如何比较字符串中的数字......
2022-06-20 10:31:07
1395
转载 vue 如何用 jsx 语法写？
以 JSX 的方式来编写 Vue 代码JSX 如何绑定 emit 如何在 JSX 语法中用 @ 绑定 emit 方法
2022-06-16 14:23:16
378
原创 这些神仙布局方式你还不会？
参考了很多人写的文章，这里做一个汇总clamp() - CSS: Cascading Style Sheets | MDN 其实就是表示 aspect-ratio - CSS: Cascading Style Sheets | MDN CSS 属性为 box 容器规定了一个期待的纵横比，这个纵横比可以用来计算自动尺寸以及为其他布局函数服务。例如：盒子保持一个正方形3. grid 布局 auto-fit 和 auto-fillrepeat() - CSS（层叠样式表） | MDNauto-fit
2022-06-14 18:40:00
337
原创 前端项目优化持续记录
结论：如果我们想获取距离父元素顶端的距离的时候，应该尽量采用后三种结论：如果在一个同步代码块需要很多元素查询时，请尽可能换成第二种结论：同样大小的 png 和 svg，svg 要比 png 图片加载的慢一些...
2022-06-13 17:26:10
223
原创 BigNumber 的静态属性含义-(ROUND_DOWN,ROUND_UP,ROUND_CEIL,ROUND_FLOOR,ROUND_HALF_UP,ROUND_HALF_CEIL)
BigNumber 有一些静态的属性，代表不同的含义ROUND_DOWN，ROUND_UP，ROUND_CEIL，ROUND_FLOOR，ROUND_HALF_DOWN，ROUND_HALF_UP，ROUND_HALF_CEIL，ROUND_HALF_FLOORROUND_UP 和 ROUND_CEIL 的不同之处ROUND_DOWN 和 ROUND_FLOOR 的不同之处...
2022-05-30 17:59:00
2477
1
原创 tsconfig.json 配置文件说明
官方链接：TypeScript: Documentation - What is a tsconfig.jsonhttps://www.typescriptlang.org/docs/handbook/tsconfig-json.html目录中存在tsconfig.json文件表明该目录是 TypeScript 项目的根目录。该tsconfig.json文件指定编译项目所需的根文件和编译器选项。JavaScript 项目可以使用jsconfig.json文件来代替，它的作用几乎相同，但默认启用了一些
2022-05-26 10:10:14
760
原创 vite 使用 web3, walletConnect 报错
vite 使用 web3 报错，global is not definevite 使用 walletConnect 报错，global is not definestream is not definebuffer is not defineprocces is not define
2022-05-18 18:03:01
2941
9
原创 通俗易懂地了解 Bloom filter
Bloom filter 的作用就是查找某个元素是否在该集合中比如我们有一个 1000 长度的数组，我们想要查找 "Hello" 字符串是否在这个数组中，那我们就必须要通过循环对比来判断，这样会非常的浪费时间这个问题可以通过 Bloom filter 解决Bloom filter 的特点是：有可能误判但一定不会漏判，换句话说就是查询返回的结果 “可能在集合中” 或 “绝对不在集合中”。...
2022-05-18 17:55:12
302
原创 如何设置手机导航栏颜色
1. 根据不同的主题设置颜色，只适用 Android 端部分浏览器，兼容性不是很好<meta name="theme-color" media="(prefers-color-scheme: light)" content="white"><meta name="theme-color" media="(prefers-color-scheme: dark)" content="black">参考：theme-color - HTML（超文本标记语言） | MDN.
2022-05-17 15:50:13
948
原创 去中心化是什么意思，区块链到底是什么
这里记录的文章只适用于完全不懂区块链的人，如果有不懂得地方，下方评论我会给出通俗易懂的回复参考了廖雪峰老师的个人博客，这里我主要是写得更小白一点https://www.liaoxuefeng.com/wiki/1207298049439968/1311929706479649什么是区块链？可以理解为是一个大型的记事账本，和传统账本不一样的地方在于，这个记事账本是由所有参与的人一起记账的，我们拿 某宝 举例子。当我们有一笔交易的时候，某宝就会记录下来这笔交易，比如记录 小明给小花转了100元，然
2022-04-28 19:19:42
4187
原创 get 和 post 的区别
getpost对比相对来说 get 是安全的，post 是不安全的，因为 get 的实现是无副作用的，post 一般情况是有副作用的。比如 get 用来获取某些列表数据，每次请求都会返回一样的数据。post 用来提交一项数据，每次请求都会在数据库中增加一列。当然，并不是一定是这样的，因为这种规定是认为的，也就是说，get 是为了无副作用而使用的http 方法，但是你可以用 get 实现删除或者增加的功能。我们来说一下幂等幂等的意思就是同样的请求被执行一次与连续执行多次的效
2022-04-24 11:43:24
3112
原创 防抖函数和节流函数
防抖函数顾名思义，防止你手抖不小心点了两次，或者说一直在抖第一种，这段时间内，如果你手抖了，那就只执行一次，比如模糊搜索，人一直在输入function generateDebounce(fn, delay) { let timer let args return function() { args = arguments window.clearTimeout(timer) timer = window.setTimeou
2022-04-21 22:09:47
317
原创 HTTP 缓存（web 缓存）
注意：常见的 HTTP 缓存只能存储 GET 响应通过复用以前获取的资源，可以显著提高网站和应用程序的性能Web 缓存减少了请求的等待时间，并且节省了网络流量缓存基本上可以分为两个大类私有缓存（浏览器缓存）公共缓存（代理缓存）私有缓存私有缓存是指只能给单个用户使用的缓存比如用户的基本信息，比如用户请求自己的身份认证信息等等公共缓存公共缓存是指所有用户都可以访问的缓存。我们常常用 nginx 做反向代理，这里我们假设服务器有一个图片是 1.jpg当一万个用户去请求这个图片，ngi
2022-04-18 13:38:02
683
空空如也
一个关于 ts 类型的问题
2022-11-14
TA创建的收藏夹 TA关注的收藏夹
TA关注的人