橘子味的冰淇淋~-CSDN博客

原创 [解决]在 Vue 3 使用 Vite 开发的项目中，放在 public 文件夹里的文件，在打包部署后出现 404 的问题

这通常是因为在 Vite 的配置或者构建过程中，这些文件没有被正确处理。public文件夹在 Vite 项目中扮演着静态资源托管的角色，但需要注意一些特定的配置和操作步骤来确保这些文件能够被正确访问。

2025-05-29 17:50:25 759

原创 npm run build 报错：Some chunks are larger than 500 KB after minification

output.manualChunks，将模块拆分成多个 chunk，减小每个 chunk的大小。build.chunkSizeWarningLimit 中提高报错的阈值。使用动态 import() 进行代码分割，减小每个 chunk 的大小。当我们的 Vue 项目太大，使用。注意：以上解决方案可叠加执行。

2025-05-29 17:26:57 1092

原创【解决】Vue + Vite + TS 配置路径别名成功仍爆红

‌在项目中设置路径别名后仍然出现爆红问题，通常是由于配置不完整或配置错误导致的。：让代码编译通过：让代码编辑器语法验证通过一.vite.config.tsresolve: {alias: {// 相对路径别名配置，使用 @ 代替 src},},});如果你的项目引入path报错，则需要下载二.tsconfig.json...其他代码// 路径"paths": {},

2025-04-21 20:42:58 894

原创解决 vite.config.ts 引入scss 预处理报错

为什么一定要使用src别名？

2025-04-10 17:42:49 833

原创 JS 数据类型之 Symbol 详解

ES5 的对象属性名都是字符串，这很容易造成属性名的冲突。凡是属性名属于 Symbol 类型的，就都是独一无二的，可以保证不会与其他属性名产生冲突。

2024-12-31 09:49:25 913

原创 js 怎么判断对象是否具有某个属性及各方法的区别

in 运算符、hasOwnProperty 方法、Object.prototype.hasOwnProperty.call()都可以判断对象是否具有某个属性，那它们有什么区别呢？

2024-12-13 17:20:48 733

Proxy 和 Reflect 都是 ES6 为了更好的操作对象而提供的新的 API，接下来探讨一下二者的作用与联系。Proxy 可以对目标对象的读取、函数调用等操作进行拦截，然后进行操作处理。它不直接操作对象，而是像代理模式，通过对象的代理对象进行操作，在进行这些操作时，可以添加一些需要的额外操作。Reflect 可以用于获取目标对象的行为，它与 Object 类似，但是更易读，为操作对象提供了一种更优雅的方式。它的方法与 Proxy 是对应的。Reflect 对象是一个全局的普通对象。

2024-12-11 16:27:18 1075

原创全面解析 Map、WeakMap、Set、WeakSet

类似于Map，但是键只能是对象类型，且键名所指向的对象是弱引用这意味着如果这个对象在其他地方没有被引用，那么它将会被垃圾回收，这也是 WeakMap 的主要应用场景。类似于Set，但成员只能是对象类型，且成员对象是弱引用这意味着如果这个对象在其他地方没有被引用，那么它将会被垃圾回收，这也是 WeakSet 的主要应用场景。需要注意的是，WeakMap 和 WeakSet 的键是弱引用，这意味着垃圾回收机制可以自动回收不再被引用的键所对应的对象，而不用手动删除键或者值。

2024-11-27 11:09:35 1550

原创 var / let / const 区别

建议在 JavaScript 中使用 let 和 const 来声明变量，因为它们提供了更好的作用域控制和可读性，且可以避免一些常见的错误。只在需要兼容旧版本 JS 或特殊情况下使用 var。const 关键字也是在 ES6 中引入的，用于声明常量。引用不可变，但对象或数组内部的属性可以被修改。ES6 引入了 let 关键字，用于。声明块级作用域的变量。

2024-07-29 11:18:38 961

原创 new Set() 的基础用法及应用场景

Set 是es6新增的数据结构，似于数组，但它的一大特性就是所有元素都是唯一的，没有重复的值，我们一般称为集合。Set 本身是一个构造函数，用来生成 Set 数据结构。

2024-07-26 17:41:09 832

原创 JS 进制及进制转换

JS中提供的进制表示方法有四种：二进制、八进制、十进制、十六进制。对于数值字面量，主要使用不同的前缀来区分：二进制(Binary)：取值数字0和1；前缀0b或0B八进制(Octal)：取值数字0-7；前缀0o或0O(ES6规定)十进制(Decimal)：取值数字0-9；不用前缀十六进制(Hexadecimal)：取值数字0-9和a-f；前缀0x或0X注意非严格模式下：如果有前缀0并且后面只用到0-7八个数字的数值时，该数值视为八进制；如果有前缀0并且后面跟随的数字中有8或者9，则视为十进制。

2024-07-26 15:50:20 1355

原创 JS 事件循环（Event Loop）机制

因此，JS 采取了异步编程，凡是需要等待的操作，都会交给浏览器或 NodeJS 进行挂起，等同步代码执行完毕后再执行异步操作。浏览器执行的时候，所有的js代码都会被解析到<script>标签中，而<script>标签又是一个宏任务，所以整个事件循环机制可以看作是在解析一个全局的宏任务。事件循环机制是 JS 的一种执行机制，一种可以实现异步编程的机制。事件循环机制就是围绕同步任务、宏任务、微任务的执行时机展开的。同步任务在调用栈中执行，异步任务在任务队列中执行。MutationObserver 回调。

2024-07-24 17:54:53 721

原创 async / await 详解

当遇到 await，会先暂停 await 及后边代码的执行，直到 Promise 的状态发生改变后，才会继续执行 await 以及后边的任务await 本质是 then 的语法糖，其实是个微任务在 await new Promise 中如果包含一个定时器，定时器的回调函数中写 resolve() 或者reject()，那么这个定时器是个宏任务，会在宏任务队列排队完成后，再改变 Promise 的状态，然后 await 才能执行，再取消阻塞。

2024-07-24 17:28:37 1495

原创 Promise 详解（原理篇）

Promise 是一种异步编程的解决方案。在异步操作中，callback 会导致回调地狱的问题，Promise 解决了这个问题。一个 Promise对象有以下三种状态:pending：初始状态，既不是成功，也不是失败状态。：意味着操作成功完成。rejected：意味着操作失败。当 new Promise() 被实例化后，即表示 Promise 进入 pending 初始化状态，准备就绪，等待运行。

2024-07-20 23:55:03 6036 2

原创浏览器的垃圾回收机制

‌内存泄漏是指在程序运行过程中，‌动态分配的内存没有得到释放，‌导致可用内存逐渐减少。：‌通过及时回收不再需要的内存，‌垃圾回收机制有助于提高浏览器的运行性能和响应能力。与其他需要手动管理内存的语言不同，在 JavaScript 中，当我们创建变量（对象，字符串等）的时候，系统会自动给变量分配对应的内存。当系统发现这些变量不再被使用的时候，会自动释放（垃圾回收）这些变量的内存，开发者不用过多的关心内存问题。当对象的引用计数器为0时，即没有任何引用指向它时，该对象被判定为不再被使用，可以回收。

2024-07-18 16:21:11 1094

原创 JS 前端数据去重

使用排序和双指针可以实现 O(nlogn) 的时间复杂度。先对数组进行排序，然后使用双指针遍历数组，如果左指针和右指针指向的值相同，就把右指针向右移动，直到找到不同的值，然后把左指针向右移动，继续遍历。11.双层循环，复杂度 O(n^2)循环和对象，复杂度 O(n^2)方法和对象，复杂度 O(n)方法，复杂度 O(n^2)方法，复杂度 O(n^2)数据结构，复杂度 O(n)数据结构，复杂度 O(n)方法，复杂度 O(n^2)，复杂度 O(n^2)，复杂度 O(n^2)8.使用排序和双指针。

2024-06-21 16:12:57 307

转载 Chrome 控制台 performance 性能分析

（4）FMP（First Meaningful Paint）首屏有意义的内容绘制，这个“有意义”没有权威的规定，本质上是通过一种算法来猜测某个时间点可能是 FMP。通过记录这些数据，开发者可以了解网页在不同阶段的性能表现，并找出可能存在的性能问题。通过性能面板，开发者可以记录和分析网页在运行时的性能数据，识别性能瓶颈，并进行针对性的优化。（3）FCP（First Contentful Paint）首屏内容绘制，首次绘制任何文本，图像，非空白canvas 或 SVG 的时间点。：每条彩色横杠表示一种资源。

2024-06-20 16:54:04 5505

原创 JS 中的各种距离 scrollTop？clientHeight?

只读，返回窗口的文档显示区的宽度（不包括菜单栏、工具栏以及滚动条等），IE 不支持，window.innerWidth。（不管是 onclick，还是 omousemove，onmouseover 等）元素滚动条被向下拉动的距离。元素被滚动条向左拉动的距离。

2024-06-14 11:15:28 793

原创 vue 之 vuex

默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。的，页面刷新会导致 Vue 实例重新加载，进而 Vuex 中的数据被重置为初始状态。在 Vuex 的 mutation 或 action 中，监听数据的变化，将数据同步到浏览器的本地存储中。这些状态信息，我们都可以放在统一的地方，对它进行保存和管理，而且它们还是响应式的。页面刷新时，从本地存储中读取数据并恢复到 Vuex 中。

2024-06-13 16:05:25 1112 1

原创 vue 之 h() 函数

vue在绝大多数情况下都推荐使用模板来编写html结构,但是对于一些复杂场景下需要完全的JS编程能力，这个时候我们就可以使用渲染函数，它比模板更接近编译器vue在生成真实的DOM之前，会将我们的节点转换成VNode，而VNode组合在一起形成一颗树结构，就是虚拟DOM（VDOM）我们之前编写的 template 中的HTML 最终也是使用渲染函数生成对应的VNode。

2024-06-11 17:59:26 5821 1

原创 JS 函数柯里化

在数学和计算机科学中，柯里化是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术，每个函数都返回一个新的函数，直到所有参数都被传递完毕。而对于 Javascript 语言来说，实际应用中的柯里化函数，可以传递一个或多个参数。简单来说就是简化函数的参数接收，将多个参数尽可能的变少。

2024-06-06 18:06:38 636

原创 Vue 数据更新了但页面没有更新

在 vue 项目中，有时我们会遇到修改完数据，但是视图却没有更新的情况。具体的场景不一样，解决问题的方法也不一样，在此汇总一下。

2024-06-04 18:00:45 2572

原创如何发布自己的 npm 包

以上步骤应该能够帮助你成功发布自己的npm包。请确保在发布前认真测试和验证你的代码，以确保其他开发者能够无缝地使用你的包。然后在项目的 node_modules 文件夹下查看是否有 npm 包。在项目目录中编写你的 npm 包代码。这表示 npm 将从 index.js 文件开始加载你的包。1、开发过程中可以在其他本地项目中使用调试，以查看实时效果。如果在发布后进行了一些修改，需要更新版本号并重新发布。按照提示填写项目信息，包括包名、版本、描述等。在本地创建一个新的项目目录，并进入该目录。

2024-05-30 16:29:34 1179

原创 Promise 详解（应用篇）

因为第一个 .then 没有给返回的具体值，所以在第二个 .then 中，剥离掉 promise，拿到的结果就是 undefined。虽然 .then 返回值是 promise，但 .then 里面的参数，拿到的是 promise 里面携带的值。，不管是成功的状态还是拒绝的状态，都等待全部执行后，并返回一个包含每个 Promise 解决状态的对象数组。因为 p1，p2，p3 都是 reject，所以 any 一直在等有成功的状态，所以一直到 p3 结束后，都没有成功的，就走 catch 那边。

2024-05-27 10:57:45 774

原创 Git 基本使用

当你执行 `git rebase -i ` 命令时，Git 会打开一个文本编辑器，列出从 `` 到当前 HEAD 的所有 commit。git init --bare 创建时不带 .git 文件夹，事实上它不带工作目录，而是作为服务器仓库供各开发者push、pull 数据，实现数据共享和同步，不保存文件，只保存历史提交的版本信息。安装完成后，在开始菜单里找到“Git”->“Git Bash”，蹦出一个类似命令行窗口的东西，就说明Git安装成功！，然后按默认选项安装即可。

2024-05-21 16:58:26 1130

原创 HTTP 与 HTTPS 的区别

浏览网站时，我们会发现网址有两种‘格式’，一种以 http:// 开头，一种以 https:// 开头。好像这两种‘格式’差别不大，只多一个 s，实际上它们有天壤之别。HTTP 与 HTTPS 主要区别如下。

2024-05-16 17:39:02 1315

原创谈谈 HTTP 的方法

举个例⼦，我们在开发⼀个博客系统，当我们要创建⼀篇⽂章的时候往往⽤ POST https://www.jianshu.com/articles ，这个请求的语义是，在 articles 的资源集合下创建⼀篇新的⽂章，如果我们多次提交这个请求会创建多个⽂章，这是⾮幂等的。这种直接覆盖资源的修改⽅式应该⽤put，但是你觉得每次都带有这么多⽆⽤的信息，那么可以发送 PATCH。其实这么说不够严谨，这是由客户端对 GET 和 POST 的策略决定的。当我们要修改⽂章的作者时，我们可以直接发送PUT。

2024-05-15 14:20:29 550

原创 HTTP 发展史

超文本传输协议（英语：HyperTextTransferProtocol，缩写：HTTP是万维网（World Wide Web）的基础协议。自蒂姆·伯纳斯-李（Tim BernersLee）博士和他的团队在 1989-1991 年间创造出它以来，HTTP 已经发生了太多的变化，在保持协议简单性的同时，不断扩展其灵活性。如今，HTTP 已经从一个只在实验室之间交换文档的早期协议进化到了可以传输图片，高分辨率视频和 3D 效果的现代复杂互联网协议。HTTP的诞生1989 年 3 月。

2024-05-14 17:51:45 948

原创 JS中的逗号“,”运算符

它首先计算左操作数，然后计算右操作数，最后返回右操作数的值，用逗号运算符可以在一条语句中执行多个运算。在JavaScript中逗号“,”也是一种运算符，称为逗号运算符。并不是在所有出现逗号的地方都组成逗号表达式，例如在变量说明中，函数参数表中逗号只是用作各变量之间的间隔符。程序中使用逗号表达式，通常是要分别求逗号表达式内各表达式的值，并不一定要求整个逗号表达式的值。逗号运算符可以用于赋值，在用于赋值时，逗号运算符总是返回表达式中的最后一项。一般形式形式:　表达式1，表达式2，…

2024-05-10 16:43:54 2530

原创设计模式之策略模式

我们可以观察在计算绩效奖金的过程中，算法的使用方式是不变的，都是根据某个算法取得计算后的奖金数额。而算法的实现是各异和变化的，每种绩效对应着不同的计算规则。一个基于策略模式的程序至少由两部分组成，

2024-05-10 10:28:25 742 1

原创设计模式之观察者模式

观察者模式是一种行为型设计模式，它定义了一种一对多的依赖关系，当一个对象的状态发生改变时，其依赖者（观察者）会自动收到通知并更新。

2024-05-09 17:12:58 809

原创设计模式之工厂模式

工厂模式属于创建型设计模式，将对象的创建与使用分离。将new操作单独封装遇到new时，就要考虑是否该使用工厂模式了上面的两个概念也是比较抽象哈，我们可以结合现实中的例子去思考，假如你去买汉堡直接点餐、取餐，不会自己亲手做商店要“封装”做汉堡的工作，做好后直接给消费者。

2024-05-07 10:02:32 818

原创设计模式之单例模式

单例模式是一种创建型设计模式，它保证一个类仅有一个实例，并提供一个访问它的全局访问点。

2024-04-26 17:55:59 815 2

原创 vue 的 keep-alive 详解

在该函数内对this.cache对象进行遍历，取出每一项的name值，用其与新的缓存规则进行匹配，如果匹配不上，则表示在新的缓存规则下该组件已经不需要被缓存，则调用pruneCacheEntry函数将其从this.cache对象剔除即可。是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例，而不是销毁它们，可防止重复渲染。发生了变化，即表示定义需要缓存的组件的规则或者不需要缓存的组件的规则发生了变化，那么就执行。表明该组件还没有被缓存过，则以该组件的。的组件实例，此时重新调整该组件。

2024-04-24 16:04:13 1881

Promise 详解（原理篇）

空空如也