Raoxiaohei的博客

vite配置的vue3项目中vite.config.ts配置的代理没有生效

Raoxiaohei — Sat, 11 Oct 2025 11:10:00 +0800

项目情况是封装了axios，同时在里面赋值了axios的baseURL，然后跟后台调试新模块的时候发现要走另外一个服务就在vite.config.ts中配置了一个新的代理，通过简单调试发现axios的baseUrl优先级是高过vite.config.ts中的代理，导致代理没有生效

Echarts 中使用 liquidFill（水球图）

Raoxiaohei — Fri, 22 Aug 2025 16:57:36 +0800

你自己的图表类型定义的时候才可以生效和使用。

vue3.0 + TypeScript 中使用 axios 同时进行二次封装

Raoxiaohei — Thu, 31 Jul 2025 17:21:09 +0800

项目背景是vite搭建的vue3.0 + TypeScript 的项目，需要统一处理和统一维护就对axios进行了二次封装

vue3.0 +TypeScript 项目中pinia基础语法和使用

Raoxiaohei — Thu, 31 Jul 2025 15:50:56 +0800

场景是采用vite搭建的vue3.0+ts项目，官方更推荐使用pinia这个状态管理工具，现在就开始学习记录一下

vue中使用v-for循环生成element中的表单组件，下拉框和单选框操作数据和视图不会更新

Raoxiaohei — Mon, 30 Dec 2024 16:14:14 +0800

场景是在项目中用特定的数据结构去循环生成element中的表单组件，其中涉及 el-select 选择器 el-radio 单选框，使用v-for动态生成后给组件赋值默认值，成功赋值后进行操作发现 el-select 选择器 el-radio 单选框的视图和绑定的数据都没有更新（绑定的数据输出到页面上查看也没有更新），在页面上对生成的其他组件例如输入框，输入内容后， el-select 选择器 el-radio 单选框的视图和数据才会更新，尝试 this.$forceUpdate() 强制更新也不行。

TypeScript项目打包时提示引入的js插件类型错误 Could not find a declaration file for module ‘*****‘

Raoxiaohei — Thu, 19 Dec 2024 11:08:16 +0800

解决办法可以通过 npm install 去下载，前提是有这个类型声明，也可以自己编写一个声明文件，我这里只说最快的一种，增加注释 // @ts-ignore。这种方法会丢失类型安全性，因为它告诉 TypeScript 忽略 jsmind 的类型错误，希望可以解决大家的问题。原因是因为在TypeScript中无法找到该库的声明文件时，就会出现这种错误。

html2canvas插件截取元素超出可视区域（包括滚动区域）

Raoxiaohei — Fri, 15 Nov 2024 15:52:00 +0800

主要就是设置了截取的宽高，通过计算的方式去获取我们能够截取的区域。

微信开发者工具中报错Component is not found in path “wx://not-found“.(env: Windows,mp,1.06.2409140； lib: 3.6.1)

Raoxiaohei — Fri, 18 Oct 2024 17:46:10 +0800

第一次写小程序就遇见了这个问题，去百度发现大家好像都没有遇见，调试了一会后发现了问题的所在，就是你不能将展示的那个页面的 xxx.js 文件删空了，默认创建的时候的page函数不能删除，否则就会提示这个错误，这个页面就会加载不出来。

vite+vue3.0打包后部署到nginx服务器上一部分路由跳转返回404

Raoxiaohei — Tue, 30 Jul 2024 18:16:34 +0800

问题就是跟描述一样，前期怀疑是自己命名问题或者vite中配置没对，看了很多文章也尝试了很多次发现都不行，最后才怀疑是nginx的问题，然后在配置中添加这一句就行了，真是当了一回冤大头。

谷歌浏览器访问网站超时，其它浏览器可以访问

Raoxiaohei — Sun, 10 Mar 2024 20:04:40 +0800

在网上搜了很久，各种重置网络和重新安装软件，甚至一度怀疑是更新后的系统和谷歌浏览器兼容出现的新bug。就完美解决了，希望能够解决大家的问题。解决思路：打开谷歌浏览器设置找到。

Vue中使用mqtt 过程和报错

Raoxiaohei — Mon, 28 Sep 2020 17:57:02 +0800

操作过程的话我就直接给大家放博客了，我也是按照他这个来的 MQTT在Vue中的使用和测试本人遇见的问题是，后端同时在跟一个前端两个客户端进行对接，客户端那边是 mqtt 方式连接前端页面按照哪个客户端的路径和端口链接就会链接失败 host:'mqtt://***.***.**/mqtt') 页面提示报错显示的路径是 ws://test.mosquitto.org/mqtt 查看资料后发现，前端页面不能通过mqtt 这种方式连接只能通过ws 然后后端重新测试就没问题了，就能连接上了然后搜索MQTT

Vue-pako gizp解压，中文乱码解决

Raoxiaohei — Fri, 25 Sep 2020 19:17:11 +0800

项目中后端返回数据为加密的，需要gizp解压，发现可以使用pako来进行解压 npm install pako // 这里进行下载在你需要使用的页面或者全局导入 import pako from 'pako' 网上搜到的方法都是复制粘贴基本上都是这样使用的 unzip(response.data) function unzip(b64Data) { var strData = atob(b64Data) var charData = strData.split('').map(f

给回车绑定登录事件，Vue路由会自动拼接一个?号而且不会跳转，需要第二次触发登录才会成功跳转

Raoxiaohei — Thu, 17 Sep 2020 17:11:10 +0800

最近在项目中添加一个element的输入框，为登录的输入密码使用同时这个登录的事件是绑定了回车的，按下回车就会自动登录从登录页面跳转到首页查看控制台发行提示警告 Password field is not contained in a form 百度的说法是需要加一个 form 标签包裹这个input 就不会提示,实际操作后

Vue中绑定键盘事件，非修饰符

Raoxiaohei — Tue, 15 Sep 2020 20:16:21 +0800

在Vue的生命周期中给全局绑定这个事件，然后再去进行判断 created(){ let that = this; document.onkeydown = function (e) { let key = window.event.keyCode; if (key === 13){ that.LoginClick(); // 这里去触发我们想要的事件就好了 } } } 要记得后面解绑哦，不然每次进入登录页面就会给键盘绑定上登录事件，

Vue中axios请求导致status为canceled

Raoxiaohei — Tue, 21 Jul 2020 16:23:50 +0800

这个的原因是浏览器端取消了这次的请求然后去百度百度的时候给出的大部分例子都是ajax请求，并且都说的是因为from中的 “submit” 改为 “button”就可以了自己尝试了一下之后发现根本不是这个问题是因为自己封装的axios中规定了请求的时间，然后你的后端返回数据的时候时间过长，到了规定的时候没有返回数据，就按照你规定的时间给你取消了 axios.defaults.timeout = 1000000; // 把这里事件改大一点就好了 ...

在VUE中集成 keycloak 来做单点登录

Raoxiaohei — Wed, 17 Jun 2020 19:46:22 +0800

这几天改进的VUE一个项目，需要增加单点登录功能，后端把需要的都给写好了，其中包括keycloak的服务配置，按照要求写好了之后发现有问题，晚上查阅了很多资料，都没有遇见类似的，最后没办法，自己本地配置服务，连接自己的keycloak才没有问题查阅过程中发现部分文章不是很全面，就打算借花献佛，一套流程走一遍，这里就不给大家介绍了，直接上过程吧 keycloak 官网入口 https://www.keycloak.org/downloads 按照你的需求下载你需要的安装包(我下载的10.0.2版本) 然后按

VUE 中获取this.$refs为undefined

Raoxiaohei — Mon, 15 Jun 2020 14:45:35 +0800

最近在修改bug的时候，需要获取到dom元素进行操作条件是通过屏幕宽度来改变获取到dom元素的定位位置，我选择通过JS的方式去改变 HTML代码

JS created(){ console.log(this.$refs.mydiv) } 控制台打印的时候为undefined 然后开始检查字母和用法，发现都没有问题，就只有在 methods 函数里面也打印一下，这个时候发现打印就完全没问题，也得到我想得到的了，那问题应

CSS 渲染内容超出一行末尾就显示省略号

Raoxiaohei — Fri, 15 May 2020 16:48:01 +0800

CSS 渲染内容超出一行末尾就显示省略号 div{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 加入以上这行代码没用的时候你就需要将元素转为块元素 div{ display: block; /* 转换一下元素就好了 */ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } ...

Vue兼容IE浏览器

Raoxiaohei — Mon, 30 Dec 2019 16:11:32 +0800

之前知道有这个插件，就打算去弄，百度大家的用法发现一直报错，或者根本就不行而且大家都是改了babel.config.js这个文件后面自己尝试了一下发现根本就不用改babel.config.js文件，直接下载和mian.js中直接用就好了下载 npm install babel-polyfill -s 在mian.js中 import ‘babel-polyfill’ 项目根文件中的babel....

Vue中axios拦截器post方式加不上请求头

Raoxiaohei — Wed, 18 Dec 2019 16:45:40 +0800

今天写项目封装axios中发现一个问题，开始给get自定义加请求头没问题 config.headers = {‘language’:‘Chinese’};，访问的通数据也及时返回了后面写post请求需要加一个 config.headers = {‘Content-Type’:‘application/x-www-form-urlencoded’};就发现服务器500，报错了，去控制台查看的时候发...