控制台报错集

目录

1、Function statements require a function name

2、Cannot read property 'addEventListener' of null

3、Unexpected end of input

4、missing ) after argument list

5、Do not use built-in or reserved HTML elements as component id: view

6、 [Vue warn]: Cannot find element: app

7、Cannot access 'router' before initialization

8、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.

9、vue-router.esm.js?8c4f:2314 ReferenceError: Btn is not defined

10、[Vue warn]: data functions should return an object

11、xx.xxx is not a function

12、Malformed arrow function parameter list

---

---

1、Function statements require a function name

翻译：函数语句需要函数名 

解析：简单的说就是忘加函数名了，像下面这样

function(){
    return 1
}

2、Cannot read property 'addEventListener' of null

翻译：无法读取null的属性“addEventListener”

解析：无法读取addEventListener属性，多半是页面还没渲染完，js就解析了，也就是元素都还没有，你就想使用了。举个例子，你想用刀切菜，但是你还没有刀，所以，你要做的就是先有把刀。

var item = document.getElementById("name")
item.addEventListener("click", myfunc)
function myfunc() {
	return 1
}

解法：可以使用window.οnlοad=function(){}将js代码包裹起来，在页面渲染完之后才开始解析js
或者，将js代码所在的script标签移到body标签的最底部

3、Unexpected end of input

翻译：输入意外结束

解析：一般是你的代码忘记闭合了，如少了一个)括号啊，或者是}大括号啥的，仔细检查代码吧

4、missing ) after argument list

翻译：参数列表后缺少）

解析：看我作甚，这翻译不写的明明白白么

5、Do not use built-in or reserved HTML elements as component id: view

翻译：不要将内置或保留的HTML元素用作组件id:view

解析：组件名字跟html元素一样了，换个名字吧

6、 [Vue warn]: Cannot find element: app

翻译：找不到app元素

解析：简单的说就是绑定元素的时候写错了，像el:"#app"不小心写成了el:"app"，检查下vue实例里的el元素绑定吧。

7、Cannot access 'router' before initialization

new Vue({
	el:"#app",
	router
})
const router = new VueRouter({
  routes
})

翻译：无法在初始化之前访问“router”

解析：代码在上面了，之所以会出现这个问题就是因为在vue实例中调用router时，router变量也就是VueRouter实例并未声明，所以，实际上在Vue实例中调用VueRouter实例时是找不到相关变量的

解法：调换下代码位置

const router = new VueRouter({
  routes
})			
new Vue({
	el:"#app",
	router
})

8、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.

翻译：在模板编译器不可用的情况下，您使用的是仅运行时版本的Vue。可以将模板预编译为呈现函数，也可以使用编译器包含的内部版本。

解析：可能别人的问题跟我的不太一样吧，我的问题其实是因为我在路由中使用了template，像下面这样

//这里是在vue项目的public/router中的index.js文件中
const Tab = {
  template: '<h3>tab1 子组件</h3>'
}
const routes = [
  {
    path:"/",
    component:Tab
  }
]

解决方案：去掉这个包含了template的组件就行了。动态添加模板的方式我暂时还不会，不好意思啊

9、vue-router.esm.js?8c4f:2314 ReferenceError: Btn is not defined

解释：就是说这个Btn未定义，但一般来说我们都是已经有定义了的，所以说最大的可能性就是我们导入的路径不对，或者是Btn组件的name写错了，例如，

//原本应该是name:"Btn",不小心就忘了加引号，导致name后面写的是个变量名，因为前面也没有一个叫做Btn的变量，因此在引用到这个Btn的时候就会报错说这个变量未定义
export default {
	name:Btn
}
//解决方案就是记得加引号

10、[Vue warn]: data functions should return an object

解析：data里面的数据需要使用return包裹住之后返回

11、xx.xxx is not a function

解析：该元素上并没有这个xxx方法，

这种情况大概率是因为咱们搞错了当前元素的类型，像string类型的数据，调用了一个forEach方法，那就会报这个错误了，检查一下当前元素的数据类型吧。

如果说你不知道当前元素上有哪些方法，建议检查一下该元素的原型链。

12、Malformed arrow function parameter list

翻译：格式错误的箭头函数参数列表

解析：这个可能是因为你的箭头函数的参数那里使用了解构赋值，但忘记用括号将其包起来了

错误示例：var foo={data}=>data;

正确示例：var foo=({data})=>data;