- 博客(81)
- 收藏
- 关注
RSS订阅原创 前端vue: 使用ElementUI适配国际化
i18n（其来源是英文单词 internationalization的首末字符i和n，18为中间的字符数）是“国际化”的简称。
2024-04-13 16:29:50
412
原创 Vue项目性能分析工具: vue-cli-plugin-webpack-bundle-analyzer
2. 重启项目, 会默认启动一个8888的端口, 按照提示访问, 就可以看到了。
2024-03-05 14:33:02
351
原创 前端抓包指南
背景h5 页面与原生 app 的交互需要与原生打通登录态，以及调用原生app 的接口。跟微信小程序开发不同，本地开发时微信有提供微信开发者工具，可以本地模拟调用。但这边h5需要每次都打包静态文件，上传服务器才能调试，非常麻烦。通过抓包工具比如 whistle 就可以做到拦截线上页面请求数据，再响应本地代码，本文主要讲述抓包的原理和抓包工具 whistle 使用。w2 help如果有如下提示说明whistle安装成功以下是whistle常用的几个命令运行以下命令启动whistlew2 start。
2024-01-31 17:52:53
366
原创 vue: 线上项目element-ui的icon偶尔乱码问题
而dart-sass在编译element-ui里icon伪元素的content unicode编码时会转换成对应unicode明文，所以通过伪元素来展示的图标如el-icon-arrow:before{ content: “\e6df”}，编译之后就变成了el-icon-arrow:before{ content: “”}，“”便是一个双字节字符，导致出现乱码。线上环境偶尔会复现，
2023-12-04 11:50:57
886
原创 qiankun: 关于ElementUI字体图标加载不出来的问题
比如我的子应用部署在a.com/bbb，主应用部署在a.com/aaa，独立访问子应用时，字体文件的路径就是a.com/bbb/static/fonts/XXX.wofff（能找到资源），嵌入主应用后访问的路径就是a.com/aaa/static/fonts/XXX.woff（找不到资源），这个时候就会报404错误。更进一步，如果不提取css到独立文件，那么css都会被打包到js文件中，会导致文件变大。elementUI的样式文件中有字体文件的引用，是以相对路径的形式写在css文件中的，
2023-12-04 11:00:00
769
原创 解决: 使用html2canvas和print-js打印组件时, 出现空白页
解决: 因为是使用html2canvas转换成图片后才打印的, 而图片是行内块级元素, 会有间隙, 所以被挤下去了, 所以可以给图片设置样式, 转换成块级元素。如图所示: 当我利用html2canvas转换成图片后, 然后使用print-js打印多张图片, 会出现空白页。
2023-09-11 18:00:36
1029
原创 vue: 使用下拉树组件@riophae/vue-treeselect
是一个基于 Vue.js 的树形选择器组件，可以用于选择树形结构的数据。它支持多选、搜索、异步加载等功能，可以自定义选项的样式和模板。该组件易于使用和扩展，适用于各种类型的项目。前言: 在vue中, 因为element-ui 2.X是没有tree-select组件的，到了element-plus就有了。4. 比较全面的属性配置参考。5. 插件的的方法配置。
2023-09-08 10:55:02
3215
原创 vue中 contenteditable 中如何将光标聚焦到最后位置
1. 在vue中, 又在for循环中, 给div元素配置contenteditable属性, 但是使用不了v-model绑定。1. 使用vue-input-contenteditable第三方包, 可以使用v-model绑定,2. 点击外部元素需要聚焦并将光标聚焦到最后位置。2. 点击外部元素需要聚焦并将光标聚焦到最后位置。
2023-08-14 11:05:03
923
原创 Vue: 使用html2canvas和print-js打印组件
由于受网络传输速度的影响，web上使用的图片都是72dpi，照片使用300dpi或者更高350dpi，会很清晰。dpi:DPI是指某些设备分辨率的度量单位。DPI越低，扫描的清晰度越低，DPI越高，清晰度越高。场景: 需要将页面的局部信息打印出来，只在前端实现，不要占用后端的资源。解决: 使用html2canvas@^1.0.0的版本。解决后的效果: 完美, 并且多余的内容会自动生成到第二页中。3. 打印出现空白页, 且没有去除页眉和页脚。解决: 设置打印时的样式。解决: 利用增大dpi。
2023-08-14 10:28:21
1198
4
原创 Babel - JS 语法转译器
说明: Babel一款JavaScript 编译器 主要用于在旧的浏览器或环境中将2015+代码转换为向后兼容版本的 JavaScript 代码。
2023-06-19 16:44:39
124
原创 electron-静默打印pdf文件
在网上看了很多相关的经验, 都是找的第三方的工具, 例如SumatraPDF, 但是这个工具不支持mac端, 直接pass, 有的是直接在页面上打开pdf, 从而打印web页面, 如果pdf文件一旦过大, 就没办法打印全部了, 隐患太大。说明: 一般打印机不支持直接打印word文件, 而电脑上的在word文档中打印其实也是内部转成了pdf才能打印的, 所以如果你的需求要支持打印word, 可以让后端作为中间人, 先把word转化为pdf, 再打印。
2023-06-16 11:46:55
1845
3
原创 关于vue项目在IE11上遇到的兼容性问题
2. Access-Control-Allow-Headers 列表中不存在请求标头 authorization。网上方案: Access-Control-Allow-Headers 的值去掉空格, 需要后端配合处理一下。解决: 在vue.config.js中配置transpileDependencies属性。1. chunk-vendors.js语法错误。分析: sockjs-client包的语法错误。
2023-06-07 11:51:49
691
原创 使用fs-extra报错: fs.rm is not a function
场景: fs-extra使用的版本号是: 11.1.1, 代码如下。解决: 更换fs-extra的版本号为10.1.0。
2023-05-10 17:59:53
416
1
原创 多个 JavaScript 和 CSS 文件合并成一个文件
这里我们创建了一个新任务 combine，它首先运行 js 和 css 任务，然后将合并后的 JavaScript 和 CSS 文件合并到一个文件 all.min.js 中。这将安装所需的 Gulp 插件，包括 gulp-concat（用于将文件合并为一个文件）、gulp-uglify（用于压缩 JavaScript 文件）和 gulp-clean-css（用于压缩 CSS 文件）。然后，将所有需要合并的 JavaScript 文件放在 js 目录下，将所有需要合并的 CSS 文件放在 css 目录下,
2023-05-05 18:36:15
1227
原创 Electron单实例与APP唤醒
如果我们在打开应用后，又点击应用的快捷方式，默认会再打开一个，这不是我们想实现的。新的应用忽略，保持应用只有一个。我们想出现的是以下两种方式。直接打开现有应用的窗口。
2023-03-22 15:23:18
322
原创 Electron 收集崩溃日志
开起后，可以收集 Electron 应用的奔溃堆栈，Electron Crash Reporter 支持将奔溃堆栈上传到在线的第三方服务平台，用户也可以通过配置上传自己的服务器（服务端需要自己开发），也可以只生成奔溃堆栈文件在本地，用于排查奔溃问题。下面将只介绍如何生成奔溃堆栈文件到本地。在不涉及隐私的情况下，让开发者了解用户使用客户端的详细情况，从这些情况中提炼的信息能够让开发者根据用户的使用情况更好地优化产品。对于任何的客户端应用，开发者都希望能够在用户上的手上记录下相关信息以便了解真实的使用情况。
2023-03-21 16:09:45
2389
1
原创 vue-electron相关问题的解决方案
package.json的electron-store依赖不小心放到devDependencies里面去了，改回dependencies即可。: 打包报错 Error: Unresolved node modules: bufferutil, utf-8-validate。删除本地的electron-builder 使用全局的electron-builder来进行打包。b. 将打包的命令设置在package.json的script中。现在让我重新进行打包，发现到此，没有出现任何报错，并且打包成功了。
2023-03-15 17:52:02
812
原创 el-input type=number的时候相关问题
这是el-input的一个bug，就是当他设置类型时number的时候，你用中文输入法输入，点空格确定，他的光标会移动到上面去。el-input设置type为number时，切换为中文输入法输入会让光标上移的问题解决。el-element 中 input设置了type=“number“还能输入e和负数。el-input 使用正则解决限制12位整数和6位小数。el-input类型为number时禁止输入e和.鼠标点击箭头增加减小数值，它的鼠标滚动也会改变。( 其实按键盘上下键还是可以让其变成负数 )
2023-03-14 18:07:25
2033
1
原创 rollup.js配置环境变量
场景: 由于项目是通过svelte.js + rollup.js框架搭建起来的, 并没有使用到cli脚手架, 没有办法配置不同环境的变量。
2023-01-12 18:10:03
1596
原创 qiankun微应用加载第三方js跨域报错
当我们需要放行的第三方脚本越来越多，需要在 whiteList 里人工添加需要放行的脚本链接，后续维护成本高。虽然qiankun也提供了解决方案，但支持跨域的方式也颇为复杂，有没有更简单的方式，纯前端实现？qiankun会把静态资源的加载拦截，改用fetch方式获取资源，所以要求这些资源支持跨域。可以在如下主应用里通过定义白名单脚本链接 whiteList ，直接放行该脚本。微应用里需要放行的资源，开发者自行在链接上带上放行协议关键字即可。假如，我们需要加载的第三方脚本链接是。幸在qiankun提供了。
2023-01-12 17:20:38
2152
原创 解决在vue项目中使用monaco-editor的报错问题
1. 先清除monaco-editor所有相关的东西, 这个包的体积太大了, 也不需要配置monaco-editor-webpack-plugin。4. 简单的配置相应的参数, 那么monaco-editor的自动补全, 变量高亮, 波浪线报错的功能就都出来了。2. 复制monaco-editor包中的min文件夹, 作为静态文件放在public文件中。当我通过以下方式导入monaco插件时, 就会报错, 所以我更换了一种方式导入。3. 在public/index.html导入相应的文件。
2022-12-01 17:09:46
4137
2
原创 yarn workspace的用法
1.1 全局安装1.2 使用1.2.1 新建一个项目比如1.2.2 初始化1.2.3 安装一个依赖比如lodash1.2.4 新建main.js文件并导入使用// main.js项目结构如图现在其它项目再去下载 lodash 速度将大大提升，当然了，仅仅一个依赖包是体现不出来的。
2022-11-14 18:12:06
932
原创 前端发版后浏览器缓存问题
开发完发布新版本后，在有些电脑上总需要强刷才能获取到最新版本的内容，太恶心了。浏览器缓存是为了节约网络的资源加速浏览，浏览器在用户磁盘上对最近请求过的文档进行存储，当访问者再次请求这个页面时，浏览器就可以从本地磁盘显示文档，这样就可以加速页面的阅览。附：前端缓存详解，看了这篇更容易理解缓存配置的概念，浏览器缓存主要有两类：协商缓存 和 彻底(强)缓存。
2022-11-02 09:43:54
2558
原创 第三方系统单点登录到指定界面，elementUI字体图标无法显示的问题
分析原因：如下图显示， elementUI的字体文件路径有问题， 多了一个/print,按照路径向上走两层的话， 刚好是从/print路径去找的， 所以就出现问题了。当第三方业务系统通过token跳转到我们项目的指定界面时， 字体图标无法显示。而在elementUI的样式中，是通过相对路径引入字体图标的。说明ELementUI 内部封装的不严谨。解决： 减少一级路由层级。
2022-10-28 18:08:58
557
原创 vue3.0+vite+ts项目搭建报错问题的处理
上面这种报错是在从index.html引入CDN的情况下报错的。解决方式将package.json中的build部分改掉。解决方案,换用从vite.config.ts中引入CDN。解决方案:修改vite.config.ts文件配置。yarn dev 不报错,build就报错。css部分加上charset: false。改成这个样子就不再报错也可以正常打包了。vant采用cdn引入的方式报错。
2022-09-07 20:54:19
2590
1
原创 NuxtJS服务端渲染
Nuxt.js 是一个基于Vue.js 开发SSR应用的一站式解决方案。同时，Nuxt.js 的热加载机制可以使开发者非常便捷的进行网站的开发。优点：基于 Vue.js自动代码分层服务端渲染强大的路由功能，支持异步数据静态文件服务ES6/ES7 语法支持打包和压缩 JS 和 CSSHTML头部标签管理本地开发支持热加载集成ESLint支持各种样式预处理器： SASS、LESS、 Stylus等。
2022-08-25 17:36:05
1382
4
原创 统一身份认证登录详细介绍-identity4
移除单独引入的 polyfill 还有问题，因为 oidc-client.js 的 polyfill 是通过闭包函数传递的，算是一个私有的对象，VUE 项目中是无法引用扩展的方法的。需要去掉单独引入的 polyfill，或者拉取 oidc-client.js 的代码，移除 babel-polyfill 引用，RDC 采用直接移除单独引入的（移除 oidc-client.js 比较麻烦）。这个页面是一个空白页，主要是用来获取配置，并调用。RDC的统一身份认证中心使用的是。，前端对接的js框架是。
2022-08-25 15:00:35
1386
原创 vue3+vite项目在按需导入vant后, 打包构建时报错
程序解析为:项目路径/node_modules/vant/lib/vant/es/组件/style 实际应该是:项目路径/node_modules/vant/lib/ vant/es/组件/style多了一个vant/lib路径。vue3+vite项目在按需加载的插件是vite-plugin-style-import1.3.0, 在本地运行没问题, 在jsk上构建报错。多了一个vant/lib路径。...
2022-08-09 11:43:33
4150
原创 vue-template-compiler的作用
vue在渲染阶段会把模板编译为AST，然后根据AST生成render函数，底层通过调用render函数会生成VNode创建虚拟DOM。今天构建时需要一个问题: vue-template-compiler 和vue的版本不一致的问题。那么为什么要版本一致, vue-template-compiler到底是干嘛的。和 vue 关于编译的 API。发现对于 compile 等函数是一致，只是。，以避免运行时编译开销和 CSP 限制。开放的参数和方法更多。vue 关于编译的 API。...
2022-08-05 15:12:53
4778
原创 el-form表单使用error提示校验信息, 重复校验信息不显示
error="errorObj.posId",第一次显示错误提示,之后再点击提交后就不显示错误提示了。查看element源码发现el-form-item的error属性监听的是watch。所以注意重新提交表单前,需要重置一下errorObj.posId。然后异步赋值需要显示的校验信息。...
2022-07-28 16:51:27
2109
1
原创 vuex-persistedstate详细使用方法
vuex的state在localStorage或sessionStorage或其它存储方式中取值在mutations,定义的方法里对vuex的状态操作的同时对存储也做对应的操作。vuex可以进行全局的状态管理，但刷新后刷新后数据会消失，这是我们不愿意看到的。如果没有路径给出，完整的状态是持久的。vuex劣势在F5刷新页面后，vuex会重新更新state，所以，存储的数据会丢失。reducer一个函数，将被调用来基于给定的路径持久化的状态。譬如vuex提示的插件和持久化的插件一起使用，配置如下。...
2022-07-27 18:02:39
9130
原创 vue-cli分模块打包，根据每个模块独立打包并且独立运行
随着项目的需求越来越多，单界面应用可能已经无法满足现在的需求了。所以，这个时候需要进行根据模块来打包项目。根据公司的要求，我这边想到一个两个方法来进行模块化打包每个项目的路由是个单独的独立文件，根据模块的选择进行路由的配置打包。这里我就不详细讲解了。有一些前端开发基础的人，基本上都可以很好的完美的理解到重点文件目录新建文件config.jsvue.config.js配置使用cross-env在pageage.json进行设置打包之后的文件展示效果来源链接：https://www.j
2022-07-06 11:42:03
2892
原创 cross-env的使用
cross-env怎么使用，作用是什么，根据官网的解释它是这样子的简而言之个人的理解是：官网地址：安装：官网的案例：衍生可以给NODE环境设置一个变量，通过process.env.xxxxx来获取，我们根据相对应的变量进行不同的配置。这个段代码我们设置了一个PROJECT_NAME的变量，通过process.env.PROJECT_NAME来获取到变量的值oneProject 。...
2022-07-06 11:38:46
1061
原创 vue项目使用oidc-client实现单点登陆
1. 安装oidc-client2. 单点登录所需配置项：oidc.js3. 我们需要在路由钩子页面增加判断，如果没有token，则重定向到服务器进行单点登录这个是我自己的项目这样用router钩子来判断权限，如果你们没有用到也没关系，忽略掉router，直接执行else中的内容，如果没有token，页面会跳转到服务器进行登录3、下面是登录完成后会回到我们系统中的操作4、执行回调后，跳转到home页面（系统首页），至此整体流程结束。源码地址: https://git
2022-07-06 11:34:07
4179
原创 Nuxt.js的详细使用
Nuxt.js 是一个基于 Vue.js 的服务端渲染应用框架，它可以帮我们轻松的实现同构应用。通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染。我们的目标是创建一个灵活的应用框架，你可以基于它初始化新项目的基础结构代码，或者在已有 Node.js 项目中使用 Nuxt.js。Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。除此之外，我们还提供了一种命令叫： ，为基于 Vue.js 的应用提供生成对应的静态站点的功能。我们相信这个命令所提
2022-07-06 11:12:00
3561
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人