处理一些 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.`
  • zsh: command not found: webpack

排名不分先后 不分难易程度 只是我遇见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

处理一些 Vue warn 和 sonar 扫描报错_第1张图片
报错提示 意外缺少通用字体系列

修改办法

在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


zsh: command not found: webpack

npm install --save-dev webpack 之后

提示 zsh: command not found: webpack

因为当前环境变量中,没有找到对应的命令

echo 'export PATH="./node_modules/.bin:$PATH"' >> ~/.zshrc
source ~/.zshrc

你可能感兴趣的:(#,踩雷合集,vue.js)