处理一些 Vue warn 和 sonar 扫描报错

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

---

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