处理一些 Vue warn 和 sonar 扫描报错
处理一些 Vue warn
- 1. [Vue warn]: Invalid prop: type check failed for prop "router". Expected Boolean, got String with val
- 2. Uncaught (in promise) cancel
- 3. Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (93)
- 4. Also define the standard property ‘box-shadow‘ for compatibility
- 5. vue.runtime.esm.js?2b0e:619 [Vue warn]: Duplicate keys detected: '0project'. This may cause an update error.
- 6. Computed property “backPath“ was assigned to but it has no setter.
- 7. sonar `Unexpected missing generic font family`
- 8. Error in render: "TypeError: Cannot read properties of undefined (reading 'regions')
- 9. `vue.runtime.common.dev.js?0359:621 [Vue warn]: Computed property "backPath" was assigned to but it has no setter.`
排名不分先后 不分难易程度 只是我遇见bug的一个总结
1. [Vue warn]: Invalid prop: type check failed for prop “router”. Expected Boolean, got String with val
[Vue warn]：无效的属性：属性“路由器”的类型检查失败应为布尔值，获取值为“true”的字符串很明显 "router"这个属性希望得到类型是布尔类型，结果得到了字符串解决方法就是在 "router".这个属性前面加上“ : ”即可2. Uncaught (in promise) cancel
elementUI + vue 控制台报错 Uncaught (in promise) cancel
beforeClose: (action, instance, done) => {}).catch(e => e);
这个.catch()删除掉就会打印Uncaught (in promise) cancel
因为取消操作时，无法捕获所以需要新增捕获异常的处理
3. Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (93)
先卸载node
然后安装 cnpm install node-sass
4. Also define the standard property ‘box-shadow‘ for compatibility
Also define the standard property ‘box-shadow’ for compatibilityscss
Also define the standard property ‘box-shadow’ for compatibility
还要定义标准属性“长方体阴影”以实现兼容性
还定义了兼容CSS的标准属性“box shadow”
::-webkit-scrollbar-thumb {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
}5. vue.runtime.esm.js?2b0e:619 [Vue warn]: Duplicate keys detected: ‘0project’. This may cause an update error.
[Vue警告]：检测到重复键：“0project”。这可能会导致更新错误。
This may cause an update error是vue发现key不是唯一的而引发的错误
在网上看了解决办法有给key添加后缀的 :key=“index+‘project’”
但是没有生效
而且很奇怪 数据是我mock的 我写了三个数组渲染 唯独中间那个报错
最后找到的问题所在
在同一层DOM节点上,vue发现key不是唯一的，会报错
但是如果不是在同一层DOM使用v-for循环，就可以保证了key的唯一性
所以我在外面套了一个div实现 这个做法可能不太正派 暂时先这样吧
6. Computed property “backPath“ was assigned to but it has no setter.
报错 vue.runtime.common.dev.js?0359:621 [Vue warn]: Computed property "backPath" was assigned to but it has no setter.
vue。运行时。常见的dev.js？0359:621[Vue warn]：计算属性“backPath”已分配给，但它没有setter。
computed:{backPath: {get() {return ''},set() {}},
}
OK
7. sonar Unexpected missing generic font family
报错提示 意外缺少通用字体系列
修改办法
在font-family后面添加 sans-serif
原因 font-family 是一个继承属性
父元素设置值，子元素会继承它的属性值
重点是 给子元素设置值 当出意外时，不会降级到父元素的属性值，而是浏览器的值
所以我们需要在全局样式中设置通用字体，以保证字体样式在不同设备上呈现时，至少有一个最基本的字体样式可以降级，而不是直接降级为系统默认字体
像我之前写的代码，设计希望在苹果设备上呈现出 PingFangSC-Regular, PingFang SC 字体样式
这样写会覆盖全局设置的通用字体样式，但是如果设备上没有苹方字体时，就会降级到系统默认字体，而不是设置的全局通用字体。
因此在设置字体样式时，除了特殊字体的声明，也要保证在特殊字体后边添加用于降级的通用字体，比如：
font-family: PingFang SC, sans-serif;
8. Error in render: "TypeError: Cannot read properties of undefined (reading ‘regions’)
[Vue warn]：呈现错误：“TypeError:无法读取未定义的属性（读取'regions'）”
页面正常渲染 但是控制台会报错
直接渲染data没问题 打印 data.regions 也没问题
Error in render: "TypeError: Cannot read properties of undefined (reading 'regions')
猜测因为数据是异步得到的
通过打断点 验证了自己的猜测
给 dom 加上 v-if data 还是不行
因为是下层元素 如果只是有data 他的数据是 data:{} 取不到regions肯定会报错
所以 需要加的判断是 v-if data.regions
把 v-if 加给下层元素判断
有了数据再渲染dom
这样拿下层元素 肯定拿得到
9. vue.runtime.common.dev.js?0359:621 [Vue warn]: Computed property "backPath" was assigned to but it has no setter.
vue。运行时。常见的dev.js？0359:621[Vue warn]：计算属性“backPath”已分配给，但它没有setter。
backPath的get set
computed:{backPath: {get() {return `/gateway/service/${this.btoa(this.id, 'ddgw')}?env=${this.env}`;},set() {}},
}
OK
处理一些 Vue warn 和 sonar 扫描报错相关推荐
- vue 打包后访问接口报错404 解决方案 （前提是在vue里使用了代理）
vue 打包后访问接口报错404 解决方案 (前提是在vue里使用了代理) 参考文章: (1)vue 打包后访问接口报错404 解决方案 (前提是在vue里使用了代理) (2)https://www. ...
- Vue中引入swiper插件报错：To install it, you can run: npm install --save swiper/css/swiper.css
Vue中引入swiper插件报错:To install it, you can run: npm install --save swiper/css/swiper.css 今天在写项目的时候用到了Sw ...
- Vue项目上线后刷新报错404问题（apache，nginx，tomcat）
一. Vue项目打包发布apache报错: route,配置一个覆盖所有的路由情况 1.需要修改router/index.js中new Router 配置,加一个base: '/htcm_front/ ...
- vue语法、跨域报错等问题集合
前言 记录vue报错问题,不断更新! 一.Eslint报错 1.加入如下注解:/* eslint-disable */ 2.编译器搜索eslint 选择 disable 3.注释package.jso ...
- vue 安装不上，报错，解决办法如下
vue 安装不上,报错,解决办法如下 前言: vue安装问题就能难倒一拨人,还没等开发呢,就先退下了,看看解决办法,加速学习~~ 安装vue 安装命令 npm install -g @vue/cli ...
- vue重复访问同一路由报错
vue重复访问同一路由报错 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) // 重写router的push ...
- vue打包npm run build报错
vue打包npm run build报错: 近期领导要求用vue做一个项目,最近在研究和学习vue,在项目打包时一直报错,这个问题困扰了好久,尝试了很多网上办法,但都没有用 电脑每次开机首次执行npm ...
- vue语法检查工具eslint报错小记（error Unexpected trailing comma、Extra semicolon、error ‘loadingInstance‘ is nev）
vue语法检查工具eslint报错小记 vue项目开发中开启语法检查工具eslint,尤其是接手别人的代码继续开发时,如果不注意语法习惯,项目运行时会出现一堆warning.error,乍一看就头大, ...
- 解决Vue项目在iOS 10 报错 “Cannot declare a let variable twice: ‘r‘”
问题描述 如下图所示,H5页面在iPhone7P及IPhone5c(iOS 10)手机上打开白屏,使用vconsole查看报错原因是Cannot declare a let variable twic ...
- 接上一篇：【Vue 项目打包后访问报错：Uncaught TypeError: Cannot read property 'call' of undefined】
上一篇:Vue 项目打包后访问报错:Uncaught TypeError: Cannot read property 'call' of undefined 其实在修改 webpack.prod.co ...
最新文章
- 英语阅读推荐：使用AJAX+WF+LINQ制作Google IG式首页
- python函数type的用意_python之type函数
- SQL Azure(十) SQL Azure Data Sync数据同步功能(上)
- A good security site
- 大型高并发系统的系统设计要点
- 重磅公开课推荐 | 如何搭建聊天机器人：技术架构剖析
- Blazor带我重玩前端(六)
- MySQL的索引创建、删除
- jquery easyui+spring mnv 样式引不进,需要加载静态资源
- 通过U盘刻录镜像安装windows系统
- Java开发必知Linux命令
- 自动控制原理7.7---离散系统的数字校正
- Redis 一主一从
- 两个决策树例题经典案例-代码示例
- 大数据分析的道与术总结
- JAVA 打豆豆辅助工具
- 解读：Informer——比Transformer更有效的长时间序列预测方法
- 【案例4】总账明细表的分区方案
- python3.5 html实体编码/解码
- 网络协议学习---IPMI协议学习
热门文章
- 苹果6swifi温度过高 iphone6s温度过高提醒修复教程
- FAT文件系统存储原理
- 高校邦python网课答案_高校邦编程之美——python网课答案公众号
- 为什么登录Webmail邮箱提示网页端登录失效，需要重新登录【企业邮箱申请流程】
- java 线程池 ThreadPoolExecutor 源码扩展 支持先增加非核心线程处理任务后放任务队列
- 如何用Goldwave批量消除音频文件开头结尾的空白
- Qt实现 员工培训管理系统
- win7时间同步出错的解决方法
- SDUT 第十届校赛H menhera酱那惨不忍睹的数学 【二分图 || 网络流】
- android手机做电脑的显示器,怎样用手机当电脑显示器