本文介绍使用nginx服务器在同一个域名下如何部署多个前端项目，在vue3使用vite打包时配置文件vite.config.ts中的base的配置方式，以及vue-router中history的配置方式，以及如何在nginx中配置才能使前端项目正常解析等关键步骤，结束你在前端项目部署时的苦恼。

同源策略在web应用安全模型中是一个重要的概念。在这个策略下，浏览器允许第一个网页中包含的脚本可以获取第二个网页的数据，前提是这两个网页在同一个源下。

什么是 DNS？域名系统 (Domain Name System)是互联网的一项服务。它作为将域名和IP地址相互映射的一个分布式数据库，能够使人更方便地访问互联网。DNS使用TCP和UDP端口53。

If you are using async setup(), make sure to register lifecycle hooks before the first await statement.

场景描述：本地起了两个服务前端vue项目跑在[链接]端口后端接口服务跑在[链接]端口前端项目请求后端接口时，浏览器给出了跨域的提示，接口请求失败。下面给出通过配置前端代理解决跨域问题的方法👇🏻

你可能在浏览器见到过上面这种UI，这是在vue项目重新build在服务端部署后，浏览器刷新页面弹出的提示，这时如果用户点击更新就会重载页面，清除之前的缓存获取最新内容。

最近在使用vue项目时看到一个这样的效果，如图：现在其实有很多网站都支持把网页安装到电脑或手机（IOS Safari支持较好），如下图安装后的效果：这些都是网页应用。接下来介绍一下如何让你的vue2项目变得可以安装。添加cli-plugin-pwa给现有的vue项目添加，使用下面命令： {代码...} 执行完之后会自动在package.json添加...

最近思考了一下如何实现网站主题颜色切换，解决方案就是使用css变量。如今网站开发过程中css变量被使用到的频率越来越高，而且 Element plus 也是用 css 变量来重构了几乎所有组件的样式系统。CSS 变量是一个非常有用的功能，几乎所有浏览器都支持。这篇文章就来说一下css变量的使用方式。

最近使用vue3官方脚手架创建的项目，在执行下面的代码后报错： {代码...} 查阅相关资料，有人提出解决方法如下，安装@types/webpack-env依赖： {代码...} 修改tsconfig.json: {代码...} 但是发现，开始的报错并没有消失。在项目根目录找到tsconfig.vitest.json，在"types": ["node", "jsdom"]中加入"webpack-env" {代码....

自从使用了vue3就需要升级element ui到plus了。而相应的图标库也需要单独引入，这篇文章来记录一下 全局全部引入 和 按需引入 的方法。

使用nuxt.js或者vue.js有时会出现下面的报错：[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content

使用markdown语法记录博客是一个高效的方式，前端加载时需要解析markdown字符串。在nuxt3框架中vue3解析markdown语法可以直接使用markdown-it来解析。

Element Plus 的图标使用和Element UI的略有区别，需要单独安装。在nuxt3中你可能并不能直接像Element Plus官网这样加载图标： {代码...} nuxt3对vue app实例做了封装，我们可以使用useNuxtApp这个组合式方法中获取到vue app： {代码...} 这样就可以正常使用图标了： {代码...}

前端开发经常会遇到监听窗口滚动事件的情况，检测到页面滚动距离做一些操作。有时候也会监听一些容器的滚动如：div，与前者有一些差别，本文会先后介绍这两种情况如何实现。

在前端开发中我们几乎不需要获取img的原始尺寸，因为只要你不刻意设置图片的宽高它都会按照最佳比例渲染。但是在微信小程序开发时，它的image标签有一个默认高度，这样你的图片很可能出现被压缩变形的情况，所以就需要获取到图片的原始尺寸对image的宽高设置。

微信小程序开发过程中使用了自定义tabBar，运行官网提供的demo是没有问题的，但是自己添加了新的tab-item后点击会出现错误，具体表现为：点击一次tab跳到指定的页面，但是tabBar的状态还停留在上一个，再次点击才能更新。

使用npm run build时报了这个错误：Assertion failed: (thread_id_key != 0x7777), function find_thread_id_key, file ../src/coroutine.cc, line 134.error Command failed with signal "SIGABRT".

使用create-react-app脚手架创建的React前端项目，在函数式组件中使用useEffect加载接口数据时 发现一个奇怪的问题：刷新页面接口调用了两次！！。

最近使用create-react-app创建了前端项目，热更新触发后，查看DOM元素发现在整个页面插入了一个iframe，层级很高，会影响查看其他元素。如上图所示：

OpenSSL 用于传输层安全(TLS)协议的开源工具包，以前称为安全套接字层(Secure Sockets Layer)协议。自签名SSL证书的风险自签名SSL证书是不受浏览器信任的，即使网站安装了自签名SSL证书，当用户访问时浏览器还是会持续弹出警告。为了网站的安全，请停止使用自签名SSL证书，推荐使用受信任的CA机构提供的免费且安全的SSL...

Web Audio API 中的音频处理运行在一个单独的线程，这样才会比较流畅。之前提议处理音频使用audioContext.createScriptProcessor，但是它被设计成了异步的形式，随之而来的问题就是处理会出现 “延迟”。

开发直播类的网页应用时，往往需要在开播前检测摄像头和麦克风是否正常，本文介绍一下浏览器如何获取到可用的摄像头和麦克风设备列表。媒体接口mediaDevices.getUserMedia()mediaDevices.enumerateDevices()需要用到上面两个媒体接口，getUserMedia()用于获取用户授权，enumerateDevices()用于获取可用设备列表。代码实...

CSS 有一些属性经常被用来解决布局问题：如（浮动float、定位postion）这些比较 hack 的方法经常会给页面遗留下一些问题。弹性盒子Flexbox是一个非常好的布局工具，网格布局 CSS Grid Layout 是最新、更强大的布局方式。本文就来简单介绍一下什么是网格布局。

当我们使用了 SEO 技巧把网站发布上线后，过一段时间就应该检测一下网站 SEO 的效果了。本文介绍一下应该从哪些角度来考量，以及可以借助哪些工具来做数据分析。

之前做过一个 Node.js实现分片上传 的功能。当时前端采用文件切片后并发上传，大大提高了上传的速度，使用Promise.race()管理并发池，有效避免浏览器内存耗尽。

JavaScript 的代码是运行在单线程上的，也就是说同一时刻只能有一个操作被执行。这样的好处是不用考虑并发问题，只需关注写得代码不要阻塞线程。通常情况，大多数浏览器当你打开一个tab就会开启一个Event Loop，而且每个网页之间是隔绝的，可以避免出现阻塞线程时导致整个浏览器卡死。

程序需要执行的操作都会被放入Call Stack(A LIFO (Last In, First Out) Stack)，先进后出的数据结构。

高斯模糊（英语：Gaussian Blur），也叫高斯平滑，是在Adobe Photoshop、GIMP以及Paint.NET等图像处理软件中广泛使用的处理效果，通常用它来减少图像噪声以及降低细节层次。这种模糊技术生成的图像，其视觉效果就像是经过一个毛玻璃在观察图像。

本文介绍一下如何使用js获取指定时间对应月份的天数。获取当前月份天数我测试的时间是2022-09-01： {代码...} 假如要获取2022-02的天数： {代码...} 注意：new Date()接收的第三个参数是0，第二个参数是人类意识中的月份（因为date.getMonth()得到的值比想象中的小1）补充月份是从0开始计算的： {代码...} 获取指定日期 ...

在Web开发中有时候会需要一些特殊样式的字体(不要问我为什么：为了装逼)。你一般都会怎么处理这个问题呢？font-family这个是css设置字体的属性： {代码...} 但是这种方式能设置的样式非常大众，很难给人一种耳目一新的感觉。所以我试图找到一种其他的方式，来设置字体样式。这里可以找到了一些线索@font-face在 CSS 的开...