Yana1225的博客

原创 更正：vue3升级nuxt3，server怎么修改

用于处理服务器端请求代理，主要关注服务器端的代理设置。：用于处理前端请求代理，主要关注前端开发时的代理设置。它们在开发过程中可以结合使用，以确保前后端都能正确处理跨域请求和代理需求。

原创 nuxt中使用window报错is not defined

因此，onMounted钩子是确保你的代码在正确的上下文中执行的一种安全机制，它避免了在服务端尝试访问不存在的window对象导致的错误，并允许你安全地使用这些对象在客户端实现动态行为和交互。这种模式确保了代码的可移植性和在不同环境下的健壮性。

原创 vue中使用use引入的svg怎么添加title

需要加在use的里面<template></use></svg>

原创 npm install报错 unexpected token

卸载所有版本的node，卸载nvm，重新找到nvm-windows最新版1.1.12，安装后，重新安装所有版本的node。执行npm install，报错：npm ERR!Unexpected token '.'但有用的办法就是好办法，折腾了两天的问题终于解决。node版本：18.10.0。nvm版本：1.1.7。

原创 数组和类数组转换

Array.from 是 JavaScript 中的一个数组方法。它用于从一个类数组对象或可迭代对象创建一个新的数组实例。Array.from 接受两个参数：第一个参数是要转换成数组的对象，第二个参数是一个可选的映射函数，用于对每个元素进行处理。

原创 怎么使用vite自动生成路由——vite-plugin-pages

是一个为 Vite 打造的插件，旨在自动化 Vue 和 React 项目中的路由处理。这个插件通过文件系统的结构自动生成路由，大大简化了路由配置的复杂性，使开发者能够更加专注于页面本身的开发，而不是路由的手动配置。以下是。

原创 Mac中文输入法区分回车和提交

在Windows下输入拼音后，敲击空格 => 显示第一个联想词，敲击回车 => 拼音显示在搜索框中，再敲击回车 => 跳转搜索结果页。2. 网上简单查了下，event有个属性可以使用——isComposing，而且这个属性只有在keydown事件中会有所区别。在Mac浏览器中，敲击空格 => 显示第一个联想词，敲击回车 => 跳转到搜索结果页。1. 最开始想到的就是阻止默认事件，但是逻辑上行不通，而且实际操作后发现确实行不通。在搜索框中输入关键词，回车跳转至搜索结果页。vue3+vuetify的项目。

原创 vue3项目中structuredClone报错

报错：Failed to execute 'structuredClone' on 'Window': #<Object> could not be cloned。修改：formData不能是ref格式，改为如下。

原创 vue2使用composition-api的情况下想使用route

vue2的项目，使用了@vue/composition-api组合式api，在其他的js文件中想使用$route.query。

原创 前端可以怎么利用AI

推荐系统：利用AI算法根据用户的行为和偏好进行数据分析和处理，为用户提供个性化的推荐内容。例如，电商网站通过推荐系统推荐用户可能感兴趣的商品。数据可视化：利用AI算法对数据进行分析和处理，并以可视化的方式展现出来，例如利用图表展示数据分析结果。自然语言处理：利用AI算法对文本进行处理和分析，例如实现语音识别、语音合成、聊天机器人等应用。图像识别：利用AI算法对图像进行分析和识别，例如通过图像识别技术实现人脸识别、物体识别等。自动化测试：利用AI算法对前端页面进行自动测试，减少测试时间和人力成本。

原创 前端写一个节流函数

前端节流函数的作用是控制一个函数的执行频率，使得该函数在一定时间间隔内只执行一次。这样可以减少不必要的计算和网络请求，提高页面性能。记录上一次函数执行的时间，每次执行时计算当前时间和上一次执行时间的差值，如果大于等于。使用该函数时，只需要将需要节流的函数作为第一个参数传入即可。，返回一个新的函数。该函数内部使用了一个变量。函数，该函数每隔 1 秒才会执行一次。该函数接收两个参数：要节流的函数。这样就能控制函数的执行频率了。上面的代码会在滚动时执行。函数，但是由于使用了。

原创 spa项目使用插件做预渲染

需求出发点：项目需要做SEO优化当前情况：项目是vue-cli搭建的spa(单页面渲染应用)，即页面查看源代码只有spa对SEO搜索引擎爬取非常不友好，因此需要用到预渲染，将需要做SEO的重点页面进行预渲染使用工具：prerender-spa-plugin...

原创 scss在calc中插入变量

定义一个宽度的变量，好统一修改，但是编译之后，变成了 invalid value ——— calc(100% - $width)，原样输出了。用插入值的表达式，格式：#{$width}

原创 a链接点击后弹出about:blank#blocked页

明明已经加了javascriptvoid(0)，为什么依旧会跳转呢？关于一个曾经困扰我被解决了，过很久之后又再次复活攻击我的事情……a链接点击后弹出aboutblank#blocked页。因为添加了target！

原创 nvm安装node的国内镜像

默认路径C//Users/Administrator/AppData/Roming/3.保存，使用nvminstall【node版本号】，即可安装node啦。需求场景居家办公使用家里电脑，发现用nvm下载不下来node，提示超时。

原创 swiper动画效果effect不生效

设置了effect后不生效，看了半天原因，源码也看过来了，以为配置项有什么问题，或者是什么方法没有调用到。试了下用鼠标拖拽有效果，可是自动轮播的时候effect效果就没有了。结论：speed设置为0了！不知道谁干的好事……...

原创 圆形环绕排列

需求：有多个圆形环绕中间的圆形排列代码：

原创 部署报错$notify

报错：Subsequent property declarations must have the same type. Property '$notify' must be of type 'ElNotification', but here has type 'Notify'.我们的项目是推送到线上后自动部署的，部署报错，看了下日志，大致报错如下：ERROR in D:/work/项目名/node_modules/vant/types/notify.d.ts(37,5):37:5 Subs.

原创 Vue2中，swiper6的箭头不生效

swiper版本：6.3.5解决：1.main中// navigation是箭头的重点import { Swiper as SwiperClass, Pagination, Navigation, Mousewheel, Autoplay} from 'swiper/swiper.esm'SwiperClass.use([Pagination, Mousewheel, Autoplay, Navigation])2.vue中（箭头放在轮播外面）<swi

原创 echarts问题记录

echarts: confine, markLine, tooltip等

原创 react-bootstrap tabPane

最近修改 superset 的项目，各种坑各种踩。本以为我以后用不上 react 框架了，没想到修改这个项目的源码，赶上了 react。这次的坑来源于这个需求：superset做移动端嵌入，在 tab 标签切换到别的再切换回来的时候，希望还能保持原本的滚动位置。我考察了一下发现滚动位置互相扰乱的原因是，滚动的是html元素，也就是这个页面整个是滑动的，所以切换到别的 tab，虽然切换完的没有滚动，但还是保留了上一个的滚动位置。闲话不多说，修改思路：tab 切换的时候记录下 html 的 scro

原创 echarts-sampling降采样

今天修改一个echarts的渲染效率问题。首先修改请求数据的问题，原先的逻辑是点击的时候请求数据，我看了下数据大概有七千多条，请求耗时是1.6s-1.7s，这是在我的电脑上。同事反馈在他的电脑上需要5s以上。于是修改逻辑为：在“分时”的时候就请求“日”和“周”的数据。这样一来优化了请求的时间，渲染图就不会出现长时间留白。其次修改：echarts图渲染的时候会有卡顿的情况，查了下echarts官方配置项，有一个sampling可用，是降采样，也就是渲染的时候不把每一个点渲染出来。e..

原创 windows系统下操作nginx的命令

启动nginx(在nginx文件夹下) start nginx 这个有点鸡肋，因为毕竟已经到文件夹下了，直接双击nginx.exe就ok了重启nginx(在nginx文件夹下) nginx.exe -s reload杀死nginx taskkill /f /im nginx.exe(在nginx文件夹下) nginx -s stop(快速停止nginx)(在nginx文件夹下...

原创 ts检测语法错误，报错insert··

执行 npm run lint --fix

原创 superset前端项目无法启动，报错jsx中有无法解析的token，没有合适的

报错忘记截图了……You may need an appropriate loader to handle this file type, currently no loader …大致意思就是，没有合适的loader去加载这类文件，报错集中在src目录下的jsx文件中。解决：webpack.config.js文件，include中添加src目录{ test: /\.jsx?$/, // include source code for plugins, but excl

原创 pdfjs预览pdf报错

跳转之后的页面已经可以出来，blob生成的链接也是有返回的，但是预览是空白，并且控制台警告：Warning: Invalid stream: “FormatError: Bad FCHECK in flate stream: 120, 239”跟到源码里面看警告的原因，应该还是解析出了问题。解决方案：axios请求文档流时候的responseType改为blob// 原本这里写的是this.$axios.get(`/api/preview?id=${id}`)// 后来发现问题就在这里，

原创 npm install报错node-sass

npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

原创 调整后台传回来的数据使其满足echarts结构

今天收到一个需求，是和echarts有关的，不过并不是调整echarts，而是传给echarts的数据要做调整。// 从后端接收到的数据类似这样：[ {statename: 'a', value: 1}, {statename: 'b', value: 2}, {statename: 'c', value: 3}];// 需求的echarts图需要的数据是这样滴：[ {statename: 'a', value: 1}, {statename: 'b

原创 谷歌浏览器更新后，缩放会使table的td边框线不一样粗

今日正常发版后，测试同事反映表格的边框线不一样粗细，我在本地没能复现，缩放也没能复现。问了下同事谷歌版本：91，自己的浏览器版本：90。试了下把自己的浏览器更新到91后复现了这种情况。在网友的启发下的解决方案：发现是border-collapse出现了问题。第一步：去掉border--collapse，改成separate第二步：给table添加border-spacing: 1px;background-color: #000;第三步：去掉td的border大功..

原创 http referer

今天同事问一个比较奇怪的问题。我们这边的项目中，有个地址，要单点到客户的系统中，具体什么不用做，只需要跳转到客户处理单点的一个链接就行，链接地址类似于这样： http://ip/ssoLogin..

原创 放个链接，今天碰到的，感觉能用上

http://www.windowfdb.com/为啥会搜到这个网站呢，起因是从想从SVN的历史记录中复制出来上次提交的文件，结果没能复制出来，反而弄成了导出文件。整个文件夹导出来就太多余了，但是让人抓狂的是：这个文件夹删不掉了！总是提示“文件/文件夹被占用”，不能删除。我特喵的就导出了一下，还什么都没干呢，就不能删了……网上找了下想删除这种被占用的文件（夹）怎么删掉。1.找到任务管理器，打开资源监视器2.在CPU页签下，有个搜索句柄，把要搜索的文件（夹）名输入，就能查到相关情况，右

原创 word将乱序文档编成顺序 & 去掉自动编号保留序号为字符串

今天鼓捣了个不太了解的东西，office-word给朋友捣鼓一个word文档，文档内容是给学生出的题库（嗯，朋友是个老师），从不同的文件中粘过来的题，所以文件中的序号不是按顺序来的。检查了一下word，发现需要做的事情是这几点：1.按规律查找到所有序号2.替换当然过程离不开百度，我本人对office的软件用的不是很熟练。第一步：找到文档空白处，插入-文档部件-域第二步：选择AutoNum，选第一种就行，然后“确定”第三步：确定之后，文档里应该会出现这个..

原创 关于前端日期的一点小记

今天看前端本地存储的文章时，看到cookie，就想再加深学习一下cookie。打开MDN找到cookie一节，看到设置expires时，里面提到世界末日，秉承一颗好奇的心，点开了世界末日2038(有兴趣的同学自行百度)，一路捋到了“千年虫”问题(有兴趣的同学还是自行百度，本人太懒，不粘贴了)。对于永久cookie我们用了Fri, 31 Dec 9999 23:59:59 GMT作为过期日。如果你不想使用这个日期，可使用世界末日[Tue, 19 Jan 2038 03:14:07 GMT]，它是32位带

原创 2020年工作日统计

原创 npm和cnpm的一点小记(和技术无关)

这几天客户现场同事碰到了两次 npm install 不能用的情况。第一次远程看了下，可能客户现场同事的网有些问题，npm install 到一半（或者百分之多少）的时候吧，就卡住不动了。遇到这种情况，我们都知道，大概率是npm网不太好了。于是给现场同事装了cnpm，临时解决了问题。后端同事的也是这个原因，也用cnpm install解决了。第二次的绕了我一下。因为后端同事是给现场发包的，发到现场之后，现场再install。我远程看了下，后端同事因为npm不好用，给现场发的时候改成cnpm了。照理开

原创 前端判断对象是否为空的几种方法

1.使用JSON把对象转换成字符串let obj1 = {};let obj2 = {a: 'a', b: 12, c: [1,2,3]};function isEmptyObject(obj) { let objStr = JSON.stringify(obj); if(objStr == '{}') { return true; } else { return false; }}isEmptyObject(obj1); //

原创 elementUI中form表单验证错乱

同一套表单，在起草时就是OK的，在编辑中验证就错乱了，项目中是因为 template 有 v-if 判断，去掉之后，验证就正常了，然鹅……我在自己的小练笔中模拟了 n 种情况后，还是没能复现这个bug，心累。然后想了想，突然想扒一扒源码，在element-ui.common.js中找到了validate方法，打断点在里面，顺流而下执行了一下，发现到this.fields这里，就出现了莫名其妙的情况了，里面要不就是把不需要验证的component放在了里面，要不没有需要验证的component….

原创 vue项目IE浏览器中打不开，为空白页

其实这个项目已经上线了，之前测过IE11的情况，而且运行良好，但是不知道最近这一次发版是改出了什么问题，IE中竟然空白了！也不报错，也没有任何警示之类的。1.先自己溜了一遍有可能是什么原因……找不到原因。2.百度找网友，大部分都提到 babel-polyfill，我也想到这个，因为之前每次起项目的时候，npm都会报出一个相关警告，只不过是警告，就没太关注。找了下项目中的相关代码，发现是有安装这个的，难道是版本出了问题？于是把依赖都删掉，重新装了一遍（相当费时间）。结果：还是不行3.再找找蛛丝

原创 vscode编辑器快捷键

记录一下最近使用到的一点点vscode的快捷键。vscode的一些快捷键都是可以自行设置的，比如在别的同事的vscode上，他们使用 Ctrl+D 来进行定位，我某一段时间改echarts比较多，echarts的实例演示中，代码块部分通常使用 Ctrl+D 来进行删除，我用习惯了，将vscode配置中的快捷键也改成改了这样。今天记录的就是几个不太会注意到的快捷键，拆分编辑器分组，以及在编辑器中切换用到的快捷键Ctrl + Alt +→(向右箭头) ：将当前的文件，移动到右边的编辑器分组，如果没.

原创 固定vscode新打开的文件标签设置

虽然说vs code可以使用单击双击，来选择新打开的文件标签是否可固定，但是！！！ctrl+p打开的文件，却只能预览不固定！！！可每次搜索完文件，大部分情况下都是需要一层一层再看回去的，那这就很不爽了。还好vs code有强大的配置"workbench.editor.enablePreview": false,"workbench.editor.enablePreviewFromQuickOpen": false这两项设置成false，就可解决打开的文件标签固定。...