遇到升级新版sass（1.80以上）的相关配置问题
最新版 作者自己写这篇文章时的最新版本1.80.6 sass在1.80版本以上有不少使用发生了变化。以下几点是我新装最新版本sass遇到的问题： 在之前版本都是使用@import来对样式文件进行引用的，升级到最新版后你会发现报错了： 解决办法就是使用@use 或者@forward 来进行引用： 如果控制台警告： 解决方法： 在css的preprocessorOptions选项中配置：api: ‘modern compiler’, 配置完...
图解Web渲染：一文看懂CSR、SSR、SSG、ISR、ESR、NSR
在现代Web开发中，了解不同的渲染模式对于提升用户体验和网站性能至关重要。本文将图文并茂地介绍几种主要的渲染方式：客户端渲染（CSR）、服务端渲染（SSR）、静态站点生成（SSG）、增量静态重建（ISR）、边缘侧渲染（ESR）和本地侧渲染（NSR）。 1\. CSR（Client Side Rendering客户端渲染） CSR 模式下，浏览器向 CDN 请求静态 HTML 和 JS，JS 负责获取业务服务器数据并在浏览器中渲染页面。...
Vite前端部署：版本更新，即刻知晓
最近测试和用户频繁反馈，说经常会出现页面点不动了。然后每次都回复，刚发完版，刷新下就好了。但时间长了，就被怀疑是能力问题，因为其他项目为什么不这样呢？ 先做一些准备工作，复盘一下当时的场景： 运行 在本地快速新建一个项目 进入项目目录中，运行 安装依赖，安装成功后启动项目 , 启动成功后运行 进行打包。打包完成后根目录下会多出一个dist目录。运行 预览构建后的项目。 页面可以正常打开： 页面窗口保持不变（不进行刷新等其他操作）。在 文...
7 种常见的前端攻击
大家都知道，保证网站的安全是十分重要的，一旦网站被攻陷，就有可能造成用户的经济损失，隐私泄露，网站功能被破坏，或者是传播恶意病毒等重大危害。所以下面我们就来讲讲7 种常见的前端攻击。 1\. 跨站脚本 (XSS) 跨站脚本攻击 (XSS) 是一种注入攻击，攻击者通过将恶意脚本注入到网页中，欺骗用户浏览器执行，从而窃取用户敏感信息或破坏网站。XSS 攻击是 Web 应用程序中最常见的安全威胁之一，也是造成重大安全事故的常见原因。 攻击方式...
前端安全领域
在前端开发领域，前端安全经常被公司忽视，这些公司大部分都是以业务为中心的公司，认为前端只是页面仔，画个页面调个接口，能有多大安全隐患？下面我将举几个前端安全相关的例子！ 下面这些内容都还是基于前端开发层面的思考和总结，在处理安全漏洞方面，前端是存在一定的局限性，所以前端的防护措施只是第一道防线，后端的安全验证和防护同样很重要。 ### 什么是XSS 它指的是攻击者通过在网页中注入恶意的脚本代码（一般是 JavaScript 代码），当其...
从前端工程师的角度将SEO做到极致
一、前言 SEO 是 Search Engine Optimization 的缩写，即搜索引擎优化。它是一种通过调整网站的内容、结构、外部链接等方面的优化手段，来提高网站在搜索引擎中的自然排名，以求得获得更多的流量，从而达到互联网营销及品牌建设的目标。 作为一名前端工程师，掌握一些 SEO 的相关知识是很有必要的，本文主要介绍 的优化手段，分为三大类，全方位的把 SEO 做到极致🌻！ 二、优化手段(一) 1\. TDK TDK 是 T...
如何在前端项目中使用出色的开源字体
字体来源 google fonts Google Fonts 是一个由 Google 提供的免费字体库，它的一个主要优点是它的开源性质，这意味着设计师和开发者可以自由地使用和分享这些字体，而无需担心版权问题。 值得注意的是, Google Fonts对中文字体的支持不够丰富.一些常见的中文字体如宋体,楷体,行书等,无法在 Google Fonts 中找到. 猫啃网 猫啃网致中分享了大量无版权问题的免费商用字体, 弥补了 Google F...
在 Web 中判断页面是不是刷新
在 Web 开发中，我们经常需要区分用户是否通过刷新操作重新加载了页面。这一操作可能是由用户手动刷新（如按下 F5 键或点击浏览器刷新按钮）或通过浏览器自动重新加载。判断页面是否刷新有助于开发者优化用户体验，例如在使用 vue 的时候需要进行权限控制，就需要判断在刷新后根据登录者的权限去添加对应的路由。 本文将详细解析几种常见的判断页面是否刷新的技术方案，并探讨各自的适用场景、优缺点以及浏览器的兼容性。 1\. 使用 是一个持久的窗口属...
完全掌握vue全家桶单元测试 : 2. 搭建 vitest 环境搭建 vitest 环境
完全掌握vue全家桶单元测试 : 2. 搭建 vitest 环境 假设我们没有写过 vue 的单元测试，我们初始化一个全新的项目，只要在初始化 vue 项目的时候，使用 vue 自带的脚手架命令，就可以自动安装好一整套的测试环境，vitest + @vue/test utils. 安装 项目初始化成功之后,打开 vitest.config.ts 就可以看到如下的单元测试配置， f 打开命令行执行 命令行就会输出如下的日志，代表 Hell...