做了这么多年前端，将常见的报错bug总结出来贴给大家吧！，贼厉害

用户33914928060
165 阅读18分钟

最后

除了简历做到位，面试题也必不可少，整理了些题目，前面有117道汇总的面试到的题目，后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。

开源分享：docs.qq.com/doc/DSmRnRG…

class Father {
    say() {
        return '我是爸爸';
    }
}
class Son extends Father {
    constructor(x, y) {
        super(); // 要在使用this之前使用super()
        this.x = x;
    }
}
new Son();
  • 总结：无论父亲上面有没有属性，只要在子类中构造器函数内部操作this，就需要super 把父级相关的 属性进行确认；

1.2.2. 逻辑: 在constructor里返回的不是实例对象

描述: 发现new完返回来的对象上没有模板里的属性

  • 有问题代码
class Person {
    constructor() {
        this.name = "";
        this.age = 0;
        return { ok: 100 }
    }
    run(){}
}
var per = new Person();
console.log(per); // {ok: 100} 
// 原因 - 因为constructor默认返回this的值(new出来的实例对象), 但是如果你显示的有return就会覆盖, per就是return后的值了
  • 分析:

new会创建一个空白对象, 在constructor里绑定属性和方法后, 默认返回到new的地方, 打印发现per对象里没有name和age

那就证明return有问题

综合代码发现return竟然不是默认的, 而是手写了一个新的对象

  • 解决: 把return {ok: 100} 去掉, 默认返回实例对象

class Person {
    constructor() {
        this.name = "";
        this.age = 0;
    }
    run(){

    }
}
var per = new Person();
console.log(per); // {name: "", age: 0}
  • 总结: 不要在constructor里写return 哦

1.3. jQ

1.3.1. 报错: Cannot read property 0 of undefined

错误描述: undefined不能读取属性0

  • 有问题代码:
// 1. 按钮 - 点击事件
$("#sendBtn").on("click", function(){
    // 2. 要值
    var nameInp = $("#nameInp").val;
    let aInp = $("#aInp").val();
    let pInp = $("#pInp").val();
    // 3. ajax -> 发给后台
    $.post("http://123.57.109.30:3006/api/addbook", {
        bookname: nameInp,
        author: aInp,
        publisher: pInp,
        appkey: "7250d3eb-18e1-41bc-8bb2-11483665535a"
    }, function(res){
        console.log(res);
    })
})
  • 分析
1.根据报错提示, jQ的8436行代码有问题, 但是jQ又不是你的代码所以不用看
2.发现下面还有一些代码片段提示, 倒数第三个是自己写的html文件, 第23行代码报错了
3.回头看23行代码, 是$.post() 这行发送网络请求的代码 - 但是怎么也看不出来读取0, 谁读0了, 咋办?
4.和对url和appkey都是复制的没问题, 那就是变量有问题了, 打印这几个变量观察值到底是什么?
    console.log(nameInp, aInp, pInp)
  1. 发现第一个参数是个函数, 不是具体的值
  2. 那nameInp变量的值是在上面用=赋值运算符给的
  3. 所以var nameInp = $(“#nameInp”).val; 右侧有问题, 发现val是JQ的方法得加()啊
  4. 解决:
// 1. 按钮 - 点击事件
$("#sendBtn").on("click", function(){
    // 2. 要值
    var nameInp = $("#nameInp").val();
    let aInp = $("#aInp").val();
    let pInp = $("#pInp").val();
    // 3. ajax -> 发给后台
    $.post("http://123.57.109.30:3006/api/addbook", {
        bookname: nameInp,
        author: aInp,
        publisher: pInp,
        appkey: "7250d3eb-18e1-41bc-8bb2-11483665535a"
    }, function(res){
        console.log(res);
    })
})
  • 总结: jQ一般都是方法, 记得加()

1.3.2. 问题: 点击按钮 - 无反应

问题描述: 点了按钮什么反应也没有

  • 有问题代码
$("#goto-register2").on("click", () => {
    $("#register").stop().show();
})
  • 分析:
1. 那证明里面这行代码可能没执行, 可以在这打印下$("#register")
(1): 如果打印执行了, 证明外面$("#goto-register2").on("click")肯定没问题 - 再分析内部
(2): 如果没打印, 证明外面$("#goto-register2")可能没获取到, 打印看看值对不对, 顺腾摸瓜

2. 这道题发现什么都没打印, 那肯定是(2)方式, 绑定有误所以打印$("#goto-register2")发现有问题
后来去对了下#后面的id值, 发现写错了没有2
  • 解决
$("#goto-register").on("click", () => {
    console.log($("#register"));
    $("#register").stop().show();
})
  • 总结: 学会顺腾摸瓜找到问题

2. 网络编程

2.1. 报错: net::ERR_INTERNET_DISCONNECTED

错误描述: 因特网已经断开连接

  • 互联网已经断开
  • 解决: 请确认自己的网络是否正常 (可以开一个网页看看能不能上淘宝)

2.2. 报错: 只要见到timeout

  • 网络超时, 用接口调试工具排查是否是后台接口的问题, 具体看后台有无响应
    • 无响应, 找后台人去重启服务器
    • 有响应, 根据错误提示解决问题

2.3. 报错: 404 (Not Found)

错误描述: 没有找到你想访问的

  • 有问题代码:
axios({
    method: 'get',
    url: 'http://123.57.109.30:3006/api/getbooks2',
    params: {
        id: 1,
        bookname: '西游记'
    }
}).then(function (res) {
    console.log(res)
})
  • 分析: axios.js 不是我的代码啊, 左边有个箭头展开, 下面有个小箭头指向的是你自己的代码引发的错误, 所以发现是axios请求有问题
  • 解决

根据业务, 把url改成正确的后台地址即可

  • 总结:

只要再看到404, 就是你要请求的url地址不对, 具体是哪一个, 根据报错的提示行数即可找到

2.4. 报错: Access to XMLHttpRequest

错误描述: Ajax链接有问题

  • 有问题代码:
axios({
    method: 'get',
    url: 'http://localhost:2001/api/getbooks',
    params: {
        id: 1,
        bookname: '西游记'
    }
}).then(function (res) {
    console.log(res)
})
  • 分析:
Access to XMLHttpRequest 
Ajax跨域了 从 http://127.0.0.1:5501 要请求 http://localhost:2001/api/getbooks

概念: 协议/ip域名/端口 ajax所在页面的, 和ajax要请求的 有一个对不上的, 就发生了跨域
浏览器默认虽然支持cors跨域资源访问, 但是后台如果不允许的话, 浏览器会拦截这个ajax请求
所以报错的后半句是: 没有再响应头里找到Access-Control-Allow-Origin的头(后台没有允许)
  • 解决

要么去让后台开启cors跨域资源共享, 或者是前端使用服务器代理请求

3. vscode相关插件

3.1. 问题: vscode插件 - post请求不发送

问题描述, 点击Rest Client插件编写的.http文件上的Send Request本想发送这个http请求, 但是右下角报错

  • 分析
Header name must be a valid HTTP 
请求头 名字 必须是一个合法的

注意, http请求报文结构中, 
第一行是请求方式, 请求URL地址
第二行往下每行都是一对请求头的名字:值  (千万不能带分号后面, 这也不是js代码, 这是http请求报文)
空行 (必须的, 规定, 因为下面是请求体的参数不再是请求头的一部分了)

请求体的内容参数和值
  • 解决: 在Content-Type下面加一行空行就好了
  • 总结: 注意Content-Type下面一行必须有空行(用回车隔出来一个哦) - 这是这个插件的规定

4. git

4.1. 问题: not a git repository

错误描述: 没有一个git仓库(存储)

  • 分析
fatal: not a git repository (or any of the parent directories): .git
致命错误: 没有git仓库(或任何父目录中) 有.git文件夹的

这个.git文件夹 (要么git clone拉取远程仓库产生), 要么git本地仓库(git init)初始化的
你现在少这个.git隐藏的文件夹啊

补充知识: .git里管理着git相关的一切
  • 解决: 这里是要把项目传到服务器上, 所以需要本地自己初始化一个 运行命令git init
  • 总结: 根据错误提示, 想想怎么解决/百度解决问题的方法

4.2. 问题: failed to push some refs to ‘xxxxx’

错误描述: xxxx地址看你自己的, 跟我的可能不一样, 但是前面错误提示是一样的

  • 分析
error: src refspec master does not match any
错误: master分支里没有任何匹配的东西

error: failed to push some refs to 'gitee.com:itcz\_jiaoyu/good122.git'
错误: 推送文件到'地址'的时候失败了

综上所述: 是你本地没有暂存和提交, 没什么可以推送的啊
  • 解决: 先去git add 和 git commit -m ‘提示’
  • 总结: 根据英文就知道什么意思啦

4.3. 问题: Access deined You do not have premission push to this repository

错误描述: 您没有预授权，访问此存储库

  • 分析
1. 远程仓库如果是你的, 证明你账号/密码输入错误(如果用的是http的git地址), 请输入正确的
   远程仓库是你的, 用ssh地址进行推送, 请确认你的ssh秘钥是正确配置的(包括文件名是否在正确的默认位置)
2. 远程仓库别人的, 请让他在这个项目里把你加入到他的项目成员里, 你才有权限推送哦
  • 解决: 权限不对, 请按照分析的去核对

自己的就配置ssh / 确认账号密码正确(登录你git远程仓库网站的账号和密码)

如果别人的, 请让他拉你进它的项目组里(如果是gitee.com, 你需要在右上角小铃铛的私信里确认邀请链接)

4.4. 问题: Repository Not Found

错误描述: 仓库没找到

  • 分析
git 克隆说没有找到这个远程仓库
那肯定就是你的远程仓库地址不对
重新找一下复制一下
  • 解决: 地址不对, 发现yiaoyu是jiaoyu地址用错了

5. 大事件项目

5.1. 问题: 表单提交 - 无反应

问题描述: 点击按钮提交表单, 本想着是Ajax提交, 但是发现==网页刷新闪了一下==

  • 问题代码:
$("#register .layui-form").on("submit", ev => {
    ev.preventDefalt();
    var data = {
        username: $("#register input[name=username]").val(),
        password: md5($("#register input[name=password]").val())
    }
    registerAPI(data, () => {
        // 显示登录页面 - 让用户登录
        $("#register").stop().hide();
    });
})
  • 分析: 证明表单自己提交了, 你并未阻止了form默认的submit事件
排查: 所以找到绑定submit事件那里, 观察你的阻止默认行为的代码 (特别是单词 是否正确)

发现preventDefalt() 单词拼写错误, 正确应该是preventDefault()
  • 解决: 把单词改成正确的即可
  • 总结: 多在心中念, 念的时候就知道怎么拼写了, 如果上面单词对了, 请检查on绑定事件是否正确 - 以及前面标签获取是否正确

5.2. 问题: 提示 - 用户名/密码 undefined

  • 问题代码
$("#register .layui-form").on("submit", ev => {
    ev.preventDefault();
    var data = {
        username: $("#register .input[name=username]").val(),
        password: md5($("#register .input[name=password]").val())
    }
    registerAPI(data, () => {
        // 显示登录页面 - 让用户登录
        $("#register").stop().hide();
    });
})
  • 分析 - 说明你的data里的值有问题, 在data上面打印一下, 然后操作下页面, 复现一下
// 既然说我用户名是undefined, 就打印下获取的用户名标签里的val()值
console.log($("#register .input[name=username]").val());
// 发现值确实是undefined
那肯定这行代码有问题, 逐个选择器分析, 发现是最后发现是input前面多了个.  (input是标签名不是class)

5.3. 问题: 验证规则不生效

  • 现象: 点击提交按钮 - 发现我故意违反了我定义的正则规则, 但是不给我出提示框
  • 分析:
1. 我们使用的是layui.css和layui.js 2个文件里的样式和js功能代码 - 先确保正确引入
2. 这个 form标签内的按钮  身上 必须有layui-submit 属性 - 才会检验 (规定)
3. 如果上面2个都确定完了. 那么确定你表单标签身上有 lay-verify属性 而且值的格式是对的如下(==多个规则之间不能有空格==
4. 例如: <input lay-verify="required|usern">
5. 如果还不行 - 就是你规则里定义出问题了去检查
form.verify({
    usern: [ // 用户名
        /^[a-z0-9]{6,10}$/
    ],
})
// 发现只有规则, 没有提示
  • 解决: 把提示文字在数组第二个元素补上(layui规则规定, 第二个值是提示文字)
form.verify({
    usern: [ // 用户名
        /^[a-z0-9]{6,10}$/,
        "用户名6到10位的数字和小字母组成"
    ],
})

5.4. 问题: 后台返回400

错误描述: 后台在影响状态码为400, 后台通知我们这次http请求有问题

  • 有问题代码:
let data = {
    oldPwd: md5($("input[name=oldPwd]").val()),
    newPwd: md5($("input[name=newPwd]").val())
}
// 后台不支持json, 所以必须用objToArg方法转成key=value
rePassAPI(data, () => {
    // 重置成功
    let s = setTimeout(() => {
        sessionStorage.removeItem("token");
        // 这里要格外注意, window指的是iframe内嵌的网页repwd页面, 而我们想让index.html整个网页跳转到登录页面, 所以window.parent - 返回当前窗口的父窗口对象
        window.location.href = "/login.html";
        clearTimeout(s)
    }, 2000);
})
  • 分析
后台提示我oldPwd的字段有问题
1. oldPwd参数名没错, 必须传的oldPwd字段传递了参数名
2. 那就是值有问题, 所以去打印js代码里, 发现值也是32位的字符了啊
3. axios在data请求体里发送的都是application/json的内容格式 - 也就是给后台发的json字符串格式 (而这个项目的后台只能解析key=value&key=value字符串 - 所以这个问题比较隐晦
  • 解决

在发送参数对象时, 先把对象转成key=value&key=value字符串哦

5.5. 问题: 上传头像没反应

  • 描述: 点击上传头像, 半天也没有反应, 也没有状态码, 而且看response后台没有任何的东西返回
  • 原因: 因为前台还在发送字符串给后台, 后台还没接收完. 半天没反应, 证明前端上传的数据过大.
  • 问题代码:
const canvas = cropper.getCroppedCanvas({
    width: 500,
    height: 500
}); // 因为canvas标签太大了. 图片太大, 改成100就好了

avatar有问题导致虽然接口成功, 但是图片获取还是没有

6. SQL相关

6.1. 解决ID不连续问题

可以把teacher换成自己具体的表名即可

ALTER TABLE teacher DROP id; ALTER TABLE teacher ADD id int NOT NULL FIRST; ALTER TABLE teacher MODIFY COLUMN id int NOT NULL AUTO_INCREMENT,ADD PRIMARY KEY(id);

7. Node

7.1. node相关

7.1.1. 问题: 安装弹窗error 2503

错误描述: 提示安装包和安装进程有问题

  • 分析

这个安装程序, 这个安装包有问题, 可以百度搜索下2503的解决方案

如果都不行, 就不要用.msi安装程序了, 直接去官网下载硬盘版(二进制的文件)直接手动配置环境变量(可以百度搜索)

  • 解决

硬盘版安装
或者
看这个地址操作: https://jingyan.baidu.com/article/cdddd41c97e94853ca00e17e.html

7.2. npm相关

7.2.1. 报错: 无法识别为可运行程序的名称

错误描述: 输入的命令不存在

  • 分析

这是要node xxx 用node执行这个js文件吧?
报错说命令怎么是我这个js文件呢?
啊, 原来没写node

  • 解决

node 下载的包引入使用.js
  • 总结: 执行js文件, 要用node命令哦

7.2.2. 报错: 403 You cannot publish over the previously published versions:1.0.0

错误描述: 你不能发布这个版本

  • 分析

403 You cannot publish over the previously published versions:1.0.0

不能在以前发布的版本上发布版本：1.0.0

原因是因为之前已经发布了1.0.0版本了, 你得修改下一个版本号再发布了

  • 解决

去package.json文件中, 手动把1.0.0 改成1.0.1 或者自己按照自己规则往上增加, 大修改.中修改.小修改

7.2.3. 报错: 400 “xxx” is invalid for new packages

错误描述: 新包名不合法

  • 分析

403 "Raincr" is invalid for new packages

"自己的包名" 不是一个新的合法的包名

说你的R大写开头不合法

  • 解决

去修改package.json的name属性的值(这是发布用的包名) - 但是建议文件夹名也一致(方便对应)

7.2.4. 报错: 403 Package name triggered spam detection

错误描述: 包名触发的垃圾邮件检测

  • 分析

403 Package name triggered spam detection
包名太垃圾了 哈哈哈哈开个玩笑, 就是不能乱写一点规则都没有啊

改为正常的包名
一般英文开头, 单词含义, -中划线链接

  • 解决

去package.json里改name的值, 文件夹最好保持一致

7.2.5. 问题: 网页 Too Many Request

错误描述: 太多请求了

  • 分析

Too Many Requests
太多的请求了

这个网站短时间有太多的请求, 就会拒绝正常逻辑响应

  • 解决

换个网络 / 等1个小时以后再来注册吧

7.2.6. 报错: operation not permitted

错误描述: 不允许操作

  • 分析

operation not permitted
不允许操作

说你没有权限

  • 解决

请以管理员方式打开终端, 可以百度看看怎么用管理员方式打开, 在搜索框里搜索右键图标, 有管理员方式打开

7.2.7. 报错: 403 tors can unpublish module

错误描述: 不能删除模块包

  • 分析


说你没有权限删除, 发现发布的包都在官方的镜像地址上, 但是这里怎么有淘宝字样


所以你没有切换npm的镜像地址

  • 解决

    npm config set registry https://registry.npmjs.org

然后在执行删除包命令


#### 7.2.8. 报错: 502 Bad Gateway


错误描述: 网关错误


* 分析

502 5开头的一般都是服务器错误, 所以后台问题网络问题

* 解决

切换网络 / ctrl+c停止后, 再重新来一遍



#### 7.2.9. 报错: this is a problem related to network connectivity


错误描述: 这是一个与网络连接有关的问题


* 分析

request to registry.npmjs.org/~/v1/login filed reason: getaddrinfo ENOTFOUND registry.npmjs.org

请求时, 找不到这个地址

一般是网络问题

* 解决

切换网络 / ctrl+c停止后, 再重新来一遍



#### 7.2.10. 报错: xxxx不是内部或外部命令


错误描述: 本机没有这个命令


* 分析

nodeomon 不是内部或外部命令

一切的命令都要安装到电脑里的程序员用的软件, 而且要成功配置到计算机的环境变量里, cmd终端里才能执行这个命令程序

nodemon 是替代node命令来实时更新js代码运行的效果的, 很明显单词打错了

// 如果单词没错就是环境没安装对, 重新安装即可

* 解决

nodemon xxxx.js



#### 7.2.11. 报错: 403


错误描述: 邮箱没有验证


* 分析

403 Forbidden 一般都是没有权限

  1. 请确认你包的package.json文件名字 和 npmjs.com网站上没有重名的才可以
  2. 在npmjs.com注册账号的时候, 会给你填写的邮箱里发一封右键, 必须点击右键里的verify按钮验证链接才算验证激活 (才能用这个账号向npm网站发布包)
* 解决

去npmjs.com登录你的账号 / 邮箱里找找有没有这个邮件 如果都没有重新注册一个邮箱再来注册这个网站 (如果不想发布也可以了解下就行了_ 哈哈)



### 7.3. express相关


## 8. webpack


### 8.1. 报错：An unexpected error occurred


错误描述: 发生意外的错误


* 分析:


看后面说package.json里的JSON格式有问题, 大概在177个字符位置


* 解决:


JSON格式非常严谨, 必须都是英文的标点, 而且只能用双引号, key也得是双引号


JSON格式: 大括号里往里嵌套, 最外层不能是并列的大括号, 所以看看是不是写外面了


可能会隐藏中文的空格, 自己调整输入法重写下


### 8.2. 报错：Unknown command or entry


错误描述: 不知道命令或入口


* 分析:


不知道命令或入口 --config webpack.config.js


* 解决:
* package.json并列处有无webpack.config.js (拼写啥的对不)
* 可能–config 周围有中文空格, 调整好输入法再重写下


### 8.3. 报错：Cannot find module xxx


错误描述: 找不到模块


* 分析:


找不到模块, 具体后面看是webpack.config.js这个模块文件


* 解决:
* 看看路径下有无这个文件(应该是package.json并列出, 因为你自定义命令就是并列路径)
* 路径上不要出现webpack名字的文件夹


### 8.4. 报错：Cannot resolve vue


错误描述: 不能引入vue


* 分析:


找不到模块vue, 这是个第三方的vue包


* 解决:
* 在当前所在工程下, 下载vue包即可


### 8.5. 报错：Invalid package name


错误描述: 包名称无效


* 分析:


yarn init为了初始化包环境得到package.json


终端会问你, 你的包名叫什么, 直接回车会用当前文件夹名也 就是括号里的


但是我们好像有中文/特殊符号


* 解决:


文件夹是文件夹, 包名是包名 不冲突, 所以在后面不能直接回车, 随便给个合法的名字即可


### 8.6. 报错：Can`t resolve xxx


错误描述: 不能引入xxx什么了


* 分析:


得能从这个报错信息里, 提取有用的信息, 发现说不能引入jquery了


* 解决:


发现好像忘记下jquery了, 或者重新下载一遍


### 8.7. 报错：无法将"yarn"识别为 cmdlet


错误描述: 终端不能识别yarn为命令使用


* 分析:


图里用的是powerShell终端, win10新出的, 执行策略帮助你防止执行不信任的脚本


* 解决:


在终端执行: `set-ExecutionPolicy RemoteSigned`


### 8.8. 报错：The engine “node” is incompatible


错误描述: node引擎不兼容


* 解决:


去node官网下载一个大于10.17的版本的nodejs, 在当前电脑覆盖式安装即可


### 8.9. 报错：webpack不是内部或外部命令


错误描述: 执行自定义命令时, 真正打包命令叫webpack


* 分析:


很有可能你当前工程下没有webpack, 去package.json确认下, 如果真没有就下载即可


* 解决:


重新在当前工程下载webpack (如果webpack4以上版本还需要下载webpack-cli)


### 8.10. 报错：Couldn’t find a package.json file


错误描述: 不能找到package.json文件


* 分析:


不能找到package.json文件, 在01\_笔记和ppt目录下确定下是否有package.json文件


是否命令所在文件夹下没有这个package.json文件


因为yarn build自定义命令, 在当前目录下找到package.json文件的script的build命令


* 解决:


确认下终端敲命令时, 当前所在文件夹路径是否正确


### 8.11. 报错：yarn 不是内部或外部命令


错误描述: yarn不是命令, 无法使用


* 分析:


安装yarn软件, 会自动配置环境变量到电脑里, cmd终端所用的命令都是在我的电脑里的环境变量的


执行的命令其实都对应着电脑里的应用程序


* 解决:


方案1: 重新安装下yarn软件, 而且目录上不能出现yarn文件夹名字/叫yarn的文件名 – 否则就覆盖了环境变量使用不了真正的yarn应用程序了


方案2: 可以用npm install -g yarn (安装个全局yarn命令) - 如果还不行就把yarn和node都卸载后重新安装到c盘下


### 8.12. 报错: 系统找不到指令路径


错误描述: 执行yarn build打包找不到系统路径


* 分析:


yarn打包时, 要使用webpack命令, 内部需要node环境, 所以猜测应该是node有问题


* 解决:


node安装路径上不要出现中文, 建议yarn和node都安装到c盘的无中文路径下面


### 8.13. 报错: in ./public/index.html


错误描述: 模块解析失败, 不能处理html文件


* 分析:


你可能把html文件引入到js里了, webpack分析到了你的html文件, 但是你没有加载器/插件能打包html文件


* 解决:


其实我们是用插件,让html作为模板自动生成一个html文件, 而不是要在js里引入啊


### 8.14. 报错: Command “xxx” not found


错误描述: 命令没有找到


* 分析:


yarn serve命令来自于package.json中


* 解决:


发现package.json中名字写的跟要执行的不一样


## 9. Vue基础


### 9.1. JS语法类错误


#### 9.1.1. 报错：xx is not defined


错误描述: 变量未定义


* 有问题代码:





* 解决:


!> 这一类错误都是相同的排错方式 按照下面的步骤即可


1. 根据1错误块得到错误发生在哪个组件以及具体发生在组件的哪个阶段
2. 根据2错误块找到错误发生的调用栈位置 直接点击定位错误
3. 根据错误信息提示在错误定位的地方修改即可


### 9.2. Vue框架规则类错误


#### 9.2.1. 报错: Vue is not defined


错误提示: Vue没定义啊


* 有问题代码:





* 分析

Vue全局变量哪里来的啊? 是不是引入vue.js才暴露在全局的啊, 就跟$变量也是引入jQuery.js才有的

所以证明你没有引入Vue.js


* 解决:

去引入vue.js源码到你的页面中即可


#### 9.2.2. 问题: 不解析内容


错误描述: 运行后, 出现了双大括号, 不解析了


* 分析:
  1. 先看看浏览器是否有报错 有报错提示根据提示解决问题
  2. 可能把标签内容都写在了
    外面去了

* 解决


把内容都写到div#app里面来, 因为vue指定了以#app为根标签, 按照你写的模板结构, vue会创建一套虚拟DOM解析真正的内容和标签, 然后替换到这个标签上来, 写外面你让vue咋解析?


#### 9.2.3. 报错: Do not mount Vue to


错误描述: 不能使用html或body作为vue的模板根标签


* 有问题代码:





* 分析

Vue框架不允许把html或者body作为挂载的根元素


* 解决:




> 

> 把挂载根元素换成普通元素即可

> 

> 

> 






#### 9.2.4. 报错: Property or method ‘xxx’ is not defined on the instance


* 有问题代码:
{{name}} 

* 分析




> 

> 在vue组件实例的模板中使用到的属性值或者方法必须要在实例的配置项中定义好才可以使用

> 

> 

> 



* 解决




> 

> 根据错误提示的内容，去组件实例选项中查看是否未定义该属性，查找范围包括data,computed,methods,props

> 

> 

> 在data: {} 里面定义name变量

> 

> 

> 




#### 9.2.5. 报错: method ‘name’ has already been defined as a



#### 9.2.6. 报错: the data property ‘name’ is already defined


错误描述: xxx already defined 就是已经定义过了的提示, 肯定重复定义了变量名哦


* 有问题代码:





* 分析




> 

> Vue框架不允许data/props/computed/methods中任意两项出现重复的属性名，在初始化配置时会进行名称检测

> 

> 

> 



* 解决




> 

> 根据错误提示找到哪里发生了重复，找到重复属性名更改为不重复即可

> 

> 

> 




#### 9.2.7. 报错: Duplicate keys detected


错误描述: 发现重复的key


* 有问题代码
  • {{item.name}} 

* 分析




> 

> 为保证列表的高效更新 vue框架在我们使用v-for指令的时候要求为每一项绑定一个唯一的key属性，注意key必须是唯一不可重复的 代码中的存在重复的id 所以会报错

> 

> 

> 



* 解决




> 

> 每次给key绑定值时确保是唯一的值

> 

> 

>
  • {{item.name}} 

#### 9.2.8. 报错: the data option should be a function


错误描述: 说你的data选项必须是一个方法


* 有问题代码:





* 分析




> 

> 上面申明的组件add-component上面的data属性直接配置了一个对象，这在vue的组件系统中是不允许的，因为组件的核心使用场景是复用，data如果直接赋值一个对象，那么多个重复的组件会共用一套数据，一个组件进行数据更改所有组件都会受到影响，违背了组件的功能独立性

> 

> 

> 



* 解决:




> 

> 任何一个组件的data都应该申明为一个函数，函数中返回一个对象，这个全新的对象作为组件的依赖数据

> 

> 

> 






#### 9.2.9. 报错: Component template should contain exactly one root element


错误描述: 组件模板应该只包含一个根元素标签


* 有问题代码:





* 分析:

 vue组件的的template选项中只能拥有一个根元素 原因是因为一是为了做组件样式隔离，二是为了渲染时存放当前的组件对应的vnode，所以只能有一个根元素 这在vue3.0中会得到改善
* 解决:



> 
> 只写一个根元素
> 
> 
> 





#### 9.2.10. 报错: do not use build-in or reserved HTML elements as


错误描述: 不能将内置或保留的html元素用作组件


* 有问题代码





* 分析


Vue框架对于组件的命名规则有一定限制，不允许和HTML内置标签发生名称重复，上面组件的名称header和HTML内置标签中的header标签重复，关于vue中的组件命名希望大家严格遵守


* 解决




> 

> 将组件名称替换成规范的命名规则即可

> 

> 

> 




#### 9.2.11. 报错: Unknown custom element


错误描述: 不知道自定义的标签, 你注册了吗?


* 有问题代码
avatar
文章
阅读
粉丝