vue 开发中的报错收集和整理

1、样式代码的报错

结论：拷贝了代码，tab 空格，与 space 空格混用了。
看你的cmd，background这一行和下面的.img-user并没有对齐，但是在你的编辑器里面却又是对齐了的，再看看错误信息，很明显这是告诉你.img-user前面应该是空格，但是却找到了个叫做eos的符号，我猜测可能是某种符号，实际上不是空格，但是在编辑器中看起来是空格的东西，你试试看真的用空格空四下吧。

2、vue 2.2.0 版本之后，v-for 循环必须要用 key

解决方法一：更改VS Code编辑器的vetur配置（vscode->文件->首选项->设置->搜索（vetur））
将"vetur.validation.template": true, 改成"vetur.validation.template": false, 即可
方法二：补全 key，
两种方式对比，建议还是用第一种方式，:key相当于是索引的作用，提高循环性能

3、报错：[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

解决方法：在 build 文件夹下 webpack.base.conf.js 文件下的 alias 中配置：'vue$':'vue/dist/vue.js'，如下图。
具体原因：https://segmentfault.com/a/1190000006435886

4、报错：type of the default value of 'data' for porp must be a function

在用以下方式定义数组变量时，会出现以上报错

props: {
  data: {
    type: Array,
    default: []
  }
},

解决方法一：

props: {
  arr: {
    type: Array,
    default: function () { return [] }
  }
}

解决方法二：

props: {
  arr: {
    type: Array,
    default: () => [] // es6的箭头函数
  }
}

具体原因在尤雨溪大大的github上有人进行了讨论：https://github.com/vuejs/vue/issues/1032

vue 开发中的报错收集和整理

猜你喜欢