- 博客(27)
- 收藏
- 关注
RSS订阅原创 前端项目使用 sonarQube 代码扫描检测 2024
SonarQube是一个开源的代码质量管理平台，它用于持续检查代码质量，并提供实时反馈，以帮助开发团队改进其代码。它可以帮助开发人员发现代码中的潜在问题、漏洞和代码异味，从而提高代码的可维护性、可读性和安全性。SonarQube可以进行静态代码分析，检查代码中的bug、漏洞、代码重复、代码规范违反等问题。它还提供了可视化的报告和仪表板，帮助团队了解代码质量的状况，并及时采取行动。
2024-01-04 17:15:53
1621
原创 浏览器多页面通讯 Broadcast Channel 和 SharedWorker
日常开发中可能遇到一种需求，需要我们在某个页面执行了某些操作，同时要同步操作到另一个页面，比如访问某音乐网站，打开某首音乐新开一个页面听歌，再回到原来的页面切换其它歌时，播放音乐的页面也要同步切换到对应的歌曲。
2023-08-17 11:52:47
446
原创 npm安装报错：npm ERR! ELOOP: too many symbolic links encountered
3、有效，更改npm全局安装目录：可以尝试更改npm的全局安装目录，将其设置为一个不在网络文件共享路径下的本地路径。1、无效，删除npm缓存：运行命令npm cache clean --force来清除npm缓存。重新设置npm安装地址后就成功了。2、无效，删了重装node。
2023-07-26 14:05:57
1489
原创 Property or method “__v_isRef“ is not defined on the instance
"__v_isRef" is not defined on the instance
2022-07-13 18:56:31
9558
7
原创 webpack对静态资源的处理（url-loader 和 file-loader）解决图片加载不出来问题
解决前端图片加载不出来问题，url-loader和file-loader的关系
2022-06-10 14:00:06
3307
5
原创 qiankun子应用不停重复加载问题
qiankun子应用不停重复加载问题如图所示，接入微应用后，控制台不停的在应用生命周期中打印 before load。一开始还以为是路由问题，后来发现是其他开发人员少加了qiankun中configureWebpack的配置：最后补充上去就解决了子应用重复加载的问题。其实这个配置，我在每个应用中都有加，所以在查找问题的时候，都以为已经加上了，但后面发现被其他人代码覆盖了，导致配置没有，太坑了。...
2022-05-20 09:16:25
2940
原创 如何解决JS执行时间过长导致页面卡顿
背景众所周知，JavaScript（简称 JS） 是单线程语言，浏览器只分配给 JS 一个主线程，每次从任务队列中执行一个任务，直到任务队列为空为止。这就必然会导致一些浏览器出现卡顿的问题，例如这次后端反馈，在文件上传的任务中，JS需要切割文件，分片上传给服务器，但遇到大型文件（几百G）的时候，则需分片几十万份，然后把这些分片逐步上传给服务器。我猜测是因为这个过程 JS 处理这些文件片段时间稍长，导致页面渲染 fps 低，所以才出现页面卡顿的现象。所以我就开始想，在面对这种因JS执行时间长，导致页面卡顿的
2022-01-14 16:10:57
14154
1
原创 G6使用心得（hx的拓扑图历险记）如何开发前端拓扑图、关系图
简介引用G6官方简介中的第一句话，G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明，简单。让用户获得关系数据的 Insight。背景在一般的开发过程中，大多数人都会使用 echarts 或 highcharts 等图表插件去开发 “漂亮的” 数据展示。那我前段时间也接触了一个关于用拓扑图漂亮的去展示数据的需求任务，其实 echarts 中的 graph 关系图，的确也能够实现需求所要的基本效果。所以在第一个拓扑图开发时，由于时间紧迫（开发时间
2021-12-01 16:43:49
7998
14
原创 get请求传对象数组参数
有个请求，里面的参数有对象数组的情况，原来是 post 请求，后面接口改成 get 请求，那用 axios 请求的参数自然也从 data 改为 params。第一次修改后的请求情况是这样的：整个路径请求参数格式如下之所以变成 数组[数组里的对象属性]:对象的值 这种格式，是因为之前有做请求拦截 get 请求数组的处理，代码如下：if (config.method === 'get') { // 如果是get请求，且params是数组类型如arr=[1,2]，则转换成arr=1&
2021-11-18 12:04:15
9509
4
原创 npm安装报no such file or directory原因和解决方法
公司用的是内网，所以 npm 下载也是通过公司的某个服务做代理实现安装的。安装依赖的时候，总会有段时间，安装依赖出问题。如图：前几天还能正常安装，今天突然就报 no such file or directory 这个错误。报的位置都是在 node_modules 的 .stagin 文件夹下面，如图：其实 .stagin 文件夹是只有安装依赖的时候才会出现，安装成功后就会自动消失。但安装的过程中依赖都是在 .stagin 文件夹下的，安装成功后，就直接放在 node_modules 目录下了。
2021-10-11 18:16:10
29182
1
原创 DllPlugin和DllReferencePlugin中的context
前言DllPlugin 和 DllReferencePlugin 这两个webpack 的工具，在我负责的一个项目中有用到，具体的使用过程，可以查看我之前写的文章： 微前端（乾坤）项目下，如何使用 dllplugin 打包抽取公共依赖及其中遇到的问题背景我目前开发的这个微前端项目，它是把所有的应用到放在同一个目录下。这也导致在维护多个应用的时候，我需要把各个应用的依赖 node_modules 安装一下，结果就使得整个项目文件体积特别大。为了减少重复的 node_modules ，我根据依赖的引入规则
2021-08-12 18:34:28
274
原创 Ant Design of Vue 表格使用 vue-draggable-resizable 封装表头问题汇总
背景项目需要表格支持拉伸每列的宽度，查看了文档，官方建议是用 vue-draggable-resizable 插件结合 components 属性，给表头 header 增加一个可拖拽的功能。其实下面的前三个问题都很好解决，网上也有很多解决方案，但因为考虑到项目中表格很多，而且每个表格都要支持拉伸列宽度，所以不可能按官方文档那样，每个表格的 vue 组件都写重复的代码，所以就封装了一个方法，专门获取可拖拽的 header 的components。问题1、使用 ResizeableTitle 可能会出
2021-08-06 12:09:24
2334
6
原创 微前端（乾坤）项目下，如何使用 dllplugin 打包抽取公共依赖及其中遇到的问题
前言对于大型的项目，往往都需要抽取公共部分的依赖，避免依赖重复加载。而在抽取公共部分插件的时候，我们可以考虑使用 externals【Webpack的externals的使用.note 】。可是 externals 前提是依赖都要有 cdn 或 找到它对应的 js 文件，例如：jQuery.min.js 之类的，也就是说这些依赖插件得要是支持 umd 格式的才行。而 dll 插件可以帮助我们直接将已安装好的依赖在 node_module 中打包出来，结合 add-asset-html-webpack-
2021-07-10 11:07:59
4062
10
原创 微前端中，Vue动态设置浏览器图标可火狐浏览器却不采用主应用图标的问题
有一个需求，需要根据系统（使用乾坤微前端搭建的系统，里面有多个子应用）的配置，去修改系统在浏览器中标签页的图标。而 Vue 的图标默认是这个：BASE_URL 是 process.env 环境中的一个变量，默认是根目录，而它下面的 favicon.ico 就是 index.html 旁边的 favicon.ico 文件了，一般是 Vue 自带的图标。首先我想到了两个思路去处理这个动态设置图标的需求：设置一个变量，通过修改这个变量，达到动态修改图标直接用获取这个 link 节点的方式，去修改它
2021-07-10 10:11:02
362
原创 在Vue项目中实现 highchart 图表的导出（下载）功能
突遇一个需求，需要项目中的图表支持下载（导出图表数据）的功能（后端懒得写下载文件接口）。图表如图所示：目前我的图表是在 Vue 项目中用 highchart 实现的，而我看到 highchart 的官方示例，几乎每个都有导出下载图表的功能。然后我以为是直接添加哪个配置，就可以轻易实现这个导出功能。结果看了 js 的图表配置项，都是些常见的配置项，没啥特殊的，可为啥我的图表就没有这个导出按钮呢？于是我直接查找 highchart 官网的 api ，找到了一个导出意思的配置项 exporting于
2021-06-29 20:26:07
1437
原创 Windows和Linux路径的正则表达式
网上搜索很多Windows和Linux的正则表达式，测试发现都不行，只能自己写一个Windows路径正则表达式：例：C:\Program Files\^[a-zA-z]:\\([\u4E00-\u9FA5A-Za-z0-9_\s]+\\{1})+$Linux路径的正则表达式：例：/user/bin/^\/([\u4E00-\u9FA5A-Za-z0-9_]+\/{1})+$若想后缀的 ‘/’ 或 ‘’ 可有可无，把最后的 {1} 改成 ? 即可。...
2021-06-23 10:26:46
2102
原创 文件下载
在工作中，我们前端开发在与后端对接的时候，经常会遇到关于下载相关的需求，通常就是后端提供下载的数据源或是地址，然后我们前端根据提供的数据源或地址去做一个请求，将资源下载下来。下载文件的两种形式1、服务器上有可供下载的静态资源，后台人员告知你请求路径，前端直接请求就行（1）通过 form 下载（一般较大的文件，采用 post 请求的可用这个方法）function bigDataToDownload(url,iframeId,params){ $("#"+iframeId).remove().
2021-04-22 12:05:24
76
原创 Vue项目中如何优雅的使用icon
在开始了解如何在 Vue 项目中规范的使用 icon 前，我们需要先了解一些 icon 最基础的知识点- sprite 技术。Sprite 技术目前，SVG Sprite最佳实践是使用symbol元素。symbol元素是什么呢？单纯翻译的话，是“符号”的意思。然而这个释义并不符合这里的场景。不知大家有没有用过Flash，symbol实际上就类似于Flash中的“影片剪辑”、或者“元件”。因此，我个人觉得，symbol应该解释为“元件”最为恰当！那，symbol和SVG Sprite又有什么关系呢？我们可
2021-04-13 16:48:51
505
原创 解决不同服务页面iframe之间跨域通信问题
在开发过程中，经常会遇到将部署不同域上的页面进行嵌套，有点类似早期的微前端开发，其中我们最常用的就是 iframe 来处理这样的需求，这就无可避免的要遇到一些 iframe 之间的通讯问题，若是 嵌入的 iframe 不是跨域的通讯是没问题，但是若是部署在其它环境上的页面，在进行通讯的时候会发现有跨域问题，这时候就需要用到我们 HTML5 自带的 postmessage 方法了发送信息otherWindow.postMessage(message, targetOrigin, [transfer]);
2021-02-06 11:39:03
506
2
原创 ie浏览器表单提交被清空问题
所有浏览器中file表单不能用js赋值，而且clone的表单节点也没有值，ie浏览器用ajaxFileUpload提交表单的时候会清掉表单的值，如果在回调里面第二次用ajaxFileUpload获取表单的值上传会报没值上传。这是因为 ie 在第一次提交表单会清理掉的表单中的值，而谷歌不会，所以遇到表单上传一次提交两次的清空就要考虑这个兼容问题了解决方法：先存储节点到一个变量（不能clone节点），再在成功的回调里面将该变量替代掉原来的表单，这样在第二次点击提交的时候，ie浏览器就不会报表单为空的问题了。
2021-02-06 11:25:49
302
原创 https网站请求下载http的资源会被拦截
Mixed Content: The page at ‘https://XXX’ was loaded over a secure connection…访问 HTTPS 网站，但有时站内下载东西使用的协议却是 HTTP，这其实存在安全隐患，现在 Chrome 不想让这样的事情发生。在谷歌浏览器75的版本还是不会被拦截，但是在测试的87版本谷歌浏览器却被拦截了，相关消息说是85版本之后进行的改造。ZDNet 报导，谷歌 Chrome 工程师正计划在 HTTPS 网站上默认禁止一些通过 HTTP 下载的
2021-02-06 11:17:25
9128
原创 解决element-ui第二次上传时on-change事件没有执行的问题
解决element-ui第二次上传时on-change事件没有执行的问题有个上传单个文件并显示文件名的需求，但是第二次上传不同的文件时，显示的文件名没有改变，去断点的时候发现，on-change事件没有被触发，但是upload组件的fileList的文件的确更换为新替换的文件，但是修改文件名显示的是on-change事件，所以必须要触发on-change事件。原本的代码如下：因为limit设置为1，导致uploadFiles只能上传一个，导致第二次上传的时候，虽然上传成功，但只是替换了第一次上传的
2021-01-15 12:02:01
4327
1
原创 vue组件中，监听页面滚动，实现吸顶效果，以及实现懒加载效果
实现吸顶效果页面结构在结构里，利用vue对象的ref绑定el-header（elementUI框架下的组件）<template> <el-header ref="head" style="padding: .25rem .2rem"> <div class="cityBox">广州市</div> <div cla...
2019-10-17 21:15:25
886
原创 vue的组件中图片的相对路径在编译中出错问题，如何引入本地图片路径
利用require引入图片的真实路径<template><div><img :src="this.img"></div></template><script>export default {data(){return { img:require('../assets/a.png')}}}</scr...
2019-10-17 17:51:36
1309
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人