- 博客(131)
- 收藏
- 关注
RSS订阅原创 vue+vite前端项目ci过程中遇到的问题
排查了好久找到事vite.config.js的配置出了问题，如图所示，将build下的watch改为false即可解决问题。另外就是如何命令行执行多个npm命令的操作，解决方法就是在每一条windows批处理命令前加上“call”字段。时，遇到了npm run build 构建完成后命令行不会终止的问题，导致了无法进行下一个步骤。如上代码，下载完依赖后会自动进行build。
2024-11-12 16:49:25
324
原创 antv X6离线文档部署 解决workspace configuration error问题
解决python环境缺失，Workspaces配置问题
2024-04-11 16:10:41
1162
15
原创 “getActivePinia()“ was called but there was no active Pinia。解决使用了pinia的组件无法正常使用的问题
使用pinia作为状态管理工具来写了一个vue组件,并发布至npm，然后在其他项目中安装使用时却出现了上述报错。2、在其他项目（使用了该组件）中的main.js中，注册pinia后挂载一个全局的 pinia实例。1、在发布的组件中使用pinia实例的地方均传入一个。
2024-02-29 14:07:27
13296
原创 YAMLSyntaxError: YAML Error in xxx:All collection items must start at the same column
错误：.stylelintrc 有点容易被忽略，不知道这个项目里面的文件咋突然把后面.js后缀去掉了。正确：.stylelintrc.js。最终发现是因为配置文件命名错误。stylelint突然报错。
2024-01-17 09:56:19
937
原创 vue3引入并加载unity工程的两种方式
所以我这里就是127.0.0.1:9081 简单测试一下，此时直接浏览器访问该地址也能看到unity项目正常运行。下面是引入unity的vue组件,其中实例化UnityWebgl时的参数地址直接引用上面的对应文件地址。首先将 unity工程打包后放在服务器上，我是使用的nginx，因为比较方便，自己就能测试。然后将iframe的地址填写为在nginx的配置文件中配置的地址就行了。这个后缀，完成后放在vue3项目的根目录下的public文件夹下。unity打包后的build文件夹是这样的。
2023-10-31 11:28:55
2775
原创 angular项目指定端口，实现局域网内ip访问
例如项目运行在ip地址为192.168.2.11的电脑上，那么其他人就可以通过192.168.2.11:8080来访问页面。这里就指定了使用8080端口运行项目，同时局域网内的其他电脑可以通过访问运行项目主机的ip来访问项目。直接修改package.json文件。
2023-10-13 14:09:52
2113
原创 浏览器调用本地exe
本地新建 .reg 文件添加注册表信息。各参数说明，路径需要多加一个\转义。双击运行reg文件添加注册表信息。修改路径和自定义协议名称。
2023-09-21 11:42:47
933
原创 ‘vite‘ does not provide an export named ‘defineConfig‘ win7使用vite
win7使用vite
2022-08-22 16:39:24
1376
原创 TypeError: Cannot read properties of undefined (reading ‘MethodInfo‘)
调用proto文件所生成的js文件来初始化客户端时报这个错TypeError: Cannot read properties of undefined (reading 'MethodInfo')出现这个问题的原因是通过proto生程js文件所用的protoc-gen-grpc-web.exe版本与grpc-web版本不一致所导致的解决方法:1,下载最新版exe文件重新生成js文件下载地址2, 重新生成js文件 生成方法在上一篇文章3, 项目中的package.json中 "grpc-w
2022-05-30 15:38:00
1318
2
原创 protobuf文件生成js文件详细流程
1,下载用来生成web js文件的工具protoc-gen-grpc-web下地地址：protoc-gen-grpc-web选择：protoc-gen-grpc-web-1.3.1-windows-x86_64.exe 即可下载完成后改名为protoc-gen-grpc-web.exe并移动到项目里，和proto文件存放在同一目录下2,下载protoc.exe执行程序下载地址protoc.exe选择protoc-3.20.1-win32.zip下载后解压就行，然后把bin文件夹里面的proto
2022-05-19 10:55:05
6696
10
原创 debug: ValidationError: Progress Plugin Invalid Options
本项目最初是由webpack3.0所构建的,最近改为vuecli5.0打包运行时报以上错误;分析了package.json发现,有很多vuecli并且本项目也没有用到的包,于是猜测是这些包的原因;于是删除了无用的babel和loader;然后删除了node_modules和package-lock.json接着执行npm cache clean --force重新npm i 重新安装依赖包最后重新打包 npm run serve即可正常启动项目目前vue.config,js没有其他配置.
2022-05-10 14:19:47
2355
3
原创 debug--表单提交后会自动刷新页面
项目中修改密码的表单提交之后会自动刷新页面,导致无法查看后续的打印信息以及debugger。于是开始排查 <div class='editBox'> <div className="title">修改密码</div> <el-form model={information} rules={rules} ref={ruleFormRef}> <el
2022-05-09 17:52:28
293
1
原创 手撕代码,使用ES6的类实现类似ES6Set的数据结构
es6新增了类的概念,同时也新增了Set这个新的数据结构,尝试使用类来实现一个类似于Set的集合。包括has(),add(),delete(),clear(),leys(),values().forEach()这几个方法;思来想去,觉得好像用到set的地方并不多,数组去重时会用一下,其他地方好像都没怎么用,我的理解就是set数据结构就是一个所有元素都是唯一的的一个集合;它接收一个可迭代对象 [iterable]以下是代码实现:class SetTest { constructor(pa
2022-03-30 18:02:05
107
原创 parseInt()和parseFloat()的解析原理
parseInt函数可将非数值转化为数值,主要用于字符串到数值的转化parseInt()函数接收到的字符串最前面的空格会被忽略，从第一个非空格字符开始转换。如果第一个字符不是数值字符、加号或减号，parseInt()立即返回 NaN。这意味着空字符串也会返回 NaN（这一点跟 Number()不一样，它返回 0）。如果第一个字符是数值字符、加号或减号，则继续依次检测每个字符，直到字符串末尾，或碰到非数值字符。比如，"1234blue"会被转换为 1234，因为"blue"会被完全忽略。类似地，"
2022-03-30 14:43:12
2427
1
原创 maplibre显示经纬线,(动态若干条)
效果图:实现思路是:1.获取当前视图的上下左右四个经纬度坐标2,通过经纬度坐标生成10条经度线,10条纬度线, 这个数量可以根据需求来进行修改3, 新增geojson文件,并且当图层缩放或者拖拽后重新生成代码: <!-- * @Author: 老范 * @Date: 2022-03-16 13:24:33 * @LastEditors: 老范 * @LastEditTime: 2022-03-25 15:37:46 * @Description: 请填写简介-->
2022-03-25 15:54:57
805
原创 JS的事件轮询eventLoop机制(宏任务,微任务)
首先放一个题: async function async1() { console.log("1"); await async2(); console.log("2"); return '3'; } async function async2() { console.log("4"); } console.log
2022-03-16 10:36:30
930
原创 vue3中的路由传参以及router和route的区别
首先要区分route和router的区别:vue-router v4+中提供useRoute和useRouter两个API下面的route为useRoute的实例 ,router为useRouter的实例所以,从A组件通过路由跳转到B组件时,需要在A组件中通过router实例来进行路由跳转并传递参数(以params为例),然后在B组件中调用使用route来进行接受例:b组件: import router from '@/router/index' ---------------
2022-03-04 11:17:13
4022
原创 WebSocket is closed before the connection is established
要实现的是这样一个需求:用户选择不同参数后,断开原有的socket连接,并且使用新的参数创建新的socket连接会报错字面意思是WebSocket在连接建立之前关闭。代码:按理说先关闭再重新打开逻辑上没有什么问题,但是既然报错了就分析一下分析:socket是基于tcp协议建立的,tcp断开连接需要四次挥手,那么socket断开连接应该也需要这样一个过程,按顺序执行的话,可能就是socket关闭的回调函数还没有执行完毕,就重新init了,就导致报错;关闭回调执行之前就已经重新打开了,我的
2022-02-14 16:55:24
32315
原创 axios配置多个请求地址(打包后可通过配置文件修改)
开发过程中可能会遇到后端接口分布在多个地址下的情况,这样调用不同接口时,就需要切换不同的请求地址;我是这样处理的核心代码:// 2.请求拦截器service.interceptors.request.use( (config) => { console.log('config', config); //发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加 config.data = JSON.
2022-01-19 13:22:11
3251
3
原创 vite 打包时校验node_modules并报错
使用vite 构建的项目在打包时会自动进行TS类型校验其中vue-tsc是对vue3类型校验的一个工具vue-tsc无法跳过对node_modules内部的文件校验, 在eslintignore中添加node_modules也不起作用后来去vue-tsc的github社区中发现作者给出了这样的一个解决方案,就是在package.json内script里面的build中加入这样一行代码: –skipLibCheck "scripts": { "build": "vue-ts
2021-12-21 09:28:59
11580
2
原创 maplibre切换底图,之后无法继续渲染数据(踩坑指南)
踩坑指南首先要明白切换底图其实就是切换的创建示例时候的style,就是这个玩意儿我这里称他为map.json文件map.json里面包括了底图的图源source以及渲染时所需的layer(层)成功渲染需要layer和source配合,其中source提供的是数据,layer提供的是具体的渲染条件这里粘一个完整的map.json{ "version": 8, "name": "Streets", "metadata": { "maputnik:renderer": "mbgljs"
2021-11-24 11:31:20
2238
2
原创 NPM unable to resolve dependency tree
npm install 报错解决:npm i --legacy-peer-deps
2021-11-10 11:59:08
811
原创 Failed to execute ‘postMessage‘ on ‘DOMWindow‘:
要做的是两个跨域页面传输传大量的数据,由于url有长度限制,所以拼接的方式行不通,后来查到可以用postmessage来做:<iframe id="myIframe" style="display: none" :src="ifSrc" frameborder="0" ></iframe>在页面中添加一个iframe标签并隐藏,这里src为为另一个项目的地址;我最开始想的是,src不能写死,后期肯定会变的,所以就用变量.
2021-10-28 11:09:58
37569
7
原创 ./node_modules/cesium/Source/ThirdParty/zip.js
在vue中引入cesium报错./node_modules/cesium/Source/ThirdParty/zip.jsModule parse failed: Unexpected token (6357:57)You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org
2021-10-18 11:15:06
2093
1
原创 Vue通过配置文件更改打包后工程的url请求服务地址（避免重复打包）
代码开发的过程中分为生产环境和开发环境，生产环境是部署上线后的环境，而开发环境就是代码开发阶段所使用的环境，很多服务都是本地的；需求：代码打包之后，后端服务地址有变动，不想重新打包，能否通过修改某些文件的方式来进行修改？解决方案：在根目录下新建一个config.js文件，里面的信息就是生产环境的地址信息：然后在index文件中引入该js文件此时 ，在我们项目中的js代码中就能够直接拿到config文件内的信息了，也就是dataUrl这个对象；紧接着，在自己封装api时，一般会判断是生产环
2021-08-25 17:47:18
5031
6
原创 vue实现数据驱动滚动条底部显示
1,需求:使用socket连接后端,每次后端数据到来之后,前端视图将实时更新,使得始终展示最新的数据2,思路数据更新时,触发逻辑通过ref传入盒子将其scrollTop设置为盒子高度: mounted() { setInterval(() => { this.setDate(); this.dealLog(this.$refs.logBox); }, 3000); // openWebsocket("ws:", this.dealLog, thi
2021-08-19 15:06:36
379
原创 “Module ‘xxx‘ does not exist in container“
今天写项目的时候 ,是使用的umi 框架,并且使用 mfsu 开启了热更新(会使项目更改之后的重新加载速度提高一大截)今天的需求是使用maplibre在页面上创建一个地图,逻辑都写好了,但是就是安装依赖项 'maplibre-gl’之后,依赖引入老是失败;找了一万年的原因Loading…还是没找到0.0最后在社区一直逛一直逛…找到一个类似的问题,然后转念一想自己的项目也开启了mfsu,然后就尝试了一下删掉src下的.umi文件夹,相当于清除了缓存,然后项目就跑通了,点赞! 膜拜大佬!..
2021-08-04 16:58:37
11849
12
原创 给cesium添加信号线
使用的是websocket通信接收数据,每条数据来了之后需要更新点到点之间的连线核心代码:首次加载 viewer.entities.add({ name: "Purple straight arrow at height", id: ele.id + "" + ele.senderToConnect, polyline: { positions: Cesium.Cartesi
2021-07-24 16:53:59
2132
8
原创 grpc-web 504 (Gateway Timeout)
前端调用grpc进行初始化时,遇到了超时的问题,需要加一个超时时间;查了很多资料,再加上多次尝试,给完成了:使用的是envoy代理请求,所以在envoy文件中添加超时时间,如下:
2021-07-21 17:55:19
523
原创 使用cesium给地图实例添加精灵图图标
前置条件:1,将精灵图存放在本地文件中;2,拿到对应的声明文件(该文件中存放了每一个类型的地图实例对应的图标在精灵图中的位置),我这里是json文件这是某一个实例模型对应的数据;我的做法是,系统登录之后,就掉接口获取到该json文件,并存储在本地存储中,然后需要用到的时候,直接从localstorage中去拿;将精灵图存储在本地:准备完成,接下来需要在数据来的时候进行渲染即可;这里用的方法是,将拿到的每一个模型数据处理成cesium所使用的czml格式数据:绘制图标关键代码:dra
2021-07-15 10:13:47
2173
原创 终端运行并实时更新JS/TS代码
首先 需要安装node 可以去官网下载在终端 npm install -g nodemon //全局安装nodemon运行js文件只需要在文件目录下打开veCode终端 运行 nodemon + 对应的文件 即可 可直接在终端内运行js类型的文件 无需额外打开浏览器运行ts文件:首先安装包 npm install -g ts-node运行ts-node +对应的文件 即可在终端中直接运行ts文件 方便学习和测试那么想要实时更新怎么做呢?新建一个no
2021-05-25 11:20:37
864
原创 useState使用TS声明类型
const[name,setName]=useState(‘tom’) //字符串const[age,setAge]=useState(1) //数字:const[sex,setSex]=useState(true) //布尔:const[obj,setObj]=useState<{name:string;age:number;sex:string}>({name:‘tom’,age:15,sex:‘男’}) 对象const[arr,setArr]=useState<Ar.
2021-05-08 16:05:27
14550
2
原创 CSS修改滚动条样式
div::-webkit-scrollbar-thumb { background: #00ecff !important; border-radius: 0.625rem; } div::-webkit-scrollbar-track { background: transparent; }div::-webkit-scrollbar-thumb :滚动条里面的小方块div::-webkit...
2021-04-12 21:32:01
167
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人