Bug小合集

1. JS语法

1.1.1. 报错: xxx is not defined

错误描述: 什么xxx变量未定义

  • 有问题代码:

  • 报错图示

  • 分析

 

  • 解决, 改成正确的变量名 

  • 总结: 再发现xxx is not defined, 就是你变量没有访问到, 检查下你的代码

1.1.2. 问题: Cannot read property 'forEach' of undefined

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

  • 有问题代码:

  • 报错图示

  • 错误分析

  • 解决:

1.1.3. 问题: xxx.foreach is not a function 

错误描述: xxx调用了foreach, 但不是一个方法

  • 有问题代码

  • 报错提示

  • 分析

  • 解决

1.1.4. 报错: Failed to execute 'append' on 'FormData': 2 arguments required, but only 1 present. 

错误描述: 未能对“FormData”执行“append”:需要2个参数,但仅存在1个参数。

  • 有问题代码

  • 报错图示

  • 分析

  • 解决

1.1.5. 报错:Must call super constructor ... 

 错误描述: 必须调用父类的constructor构造函数

  • 有问题代码

  • 报错图示:

  • 分析:使用ES6对其它类进行继承时,语法报错

  • 解决:

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

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

  • 有问题代码

  • 分析:

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

    那就证明return有问题

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

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

2. 网络编程 

2.1. 报错: net::ERR_INTERNET_DISCONNECTED

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

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

2.2. 报错: 只要见到timeout

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

2.3. 报错: 404 (Not Found)

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

  • 有问题代码:

  • 报错图示

  • 分析: axios.js 不是我的代码啊, 左边有个箭头展开, 下面有个小箭头指向的是你自己的代码引发的错误, 所以发现是axios请求有问题

  • 解决

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

  • 总结:

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

2.4. 报错: Access to XMLHttpRequest

错误描述: Ajax链接有问题

  • 有问题代码:

  • 报错图示

  • 分析:

  • 解决

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

3. vscode相关插件

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

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

  • 报错图示:

  • 分析

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

4. git

4.1. 问题: not a git repository

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

  • 报错图示:

  • 分析

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

4.2. 问题: failed to push some refs to 'xxxxx'

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

  • 报错图示

  • 分析

  • 解决: 先去git add 和 git commit -m '提示'
  • 总结: 根据英文就知道什么意思啦

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

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

  • 报错图示

  • 分析

  • 解决: 权限不对, 请按照分析的去核对

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

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

 

4.4. 问题: Repository Not Found

错误描述: 仓库没找到

  • 报错图示

  • 分析

  • 解决: 地址不对, 发现yiaoyu是jiaoyu地址用错了

5. Node

5.1. node相关

5.1.1. 问题: 安装弹窗error 2503

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

  • 报错图示

  • 分析 

  • 解决 

 5.2. npm相关

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

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

  • 报错图示

  • 分析 

 

  • 解决 

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

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

  • 报错图示

  • 分析 

  •  解决

5.2.3. 报错: 400 "xxx" is invalid for new packages

错误描述: 新包名不合法

  • 报错图示

  • 分析 

 

  • 解决 

5.2.4. 报错: 403 Package name triggered spam detection

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

  • 报错图示

  • 分析 

 

  • 解决 

5.2.5. 问题: 网页 Too Many Request

错误描述: 太多请求了

  • 分析 

  • 解决 

5.2.6. 报错: operation not permitted

错误描述: 不允许操作

  • 报错图示

  • 分析 

 

  • 解决

 

5.2.7. 报错: 403 tors can unpublish module

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

  • 报错图示

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

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

 

5.2.8. 报错: 502 Bad Gateway

错误描述: 网关错误

  • 报错图示

  • 分析 

 

  • 解决 

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

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

  • 报错图示

  • 分析 

  • 解决

5.2.10. 报错: 403

错误描述: 邮箱没有验证

  • 报错图示

  • 分析 

  • 解决

 6. webpack

6.1. 报错:无法将"yarn"识别为 cmdlet

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

  • 报错图示:

  • 分析:

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

  • 解决:

 

6.2. 报错:webpack不是内部或外部命令

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

  • 报错图示:

  • 分析:

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

  • 解决:

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

7. Vue基础

7.1. JS语法类错误

7.1.1. 报错:xx is not defined

错误描述: 变量未定义

  • 有问题代码:

  • 报错图示:

  • 分析:

vue框架针对这类错误会给出俩块错误提示

标记为1的地方是vue框架给出的发生错误的组件中的位置 上图的意思是错误发生在Root根组件的mounted声明周期函数中

标记为2的地方是vue框架给出的发生错误的js语言中调用栈的位置 上图的意思是错误发生在add方法调用的时候

  • 解决:

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

  1. 根据1错误块得到错误发生在哪个组件以及具体发生在组件的哪个阶段

  2. 根据2错误块找到错误发生的调用栈位置 直接点击定位错误

  3. 根据错误信息提示在错误定位的地方修改即可

7.2. Vue框架规则类错误

7.2.1. 报错: Vue is not defined

错误提示: Vue没定义啊

  • 有问题代码:

  • 报错图示: 

  • 分析

  • 解决:

7.2.2. 问题: 不解析内容

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

  • 报错提示

  • 分析 

  • 解决

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

7.2.3. 报错: Do not mount Vue to <html>

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

  • 有问题代码:

  • 报错图示:

  • 分析
Vue框架不允许把html或者body作为挂载的根元素
  • 解决:

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

<div id="app"></div>

 

7.2.4. 报错: Property or method 'xxx' is not defined on the instance

错误描述: 属性或方法没定义

  • 有问题代码:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
  <!--模板使用了name但是在实例选项中没有申明-->
  {{name}}
</div>

<script>
  const vm = new Vue({
    el: '#app',
    computed:{}
    data: {},
    methods: {}
  })
</script>
  • 分析

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

  • 解决

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

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

 

7.2.5. 报错: the data property 'name' is already defined

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

  • 有问题代码:
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            name: 'cp'
        },
        props: {
            name: {
                type: String
            }
        },
        computed: {
            name() {}
        },
        methods: {
            name() {
                console.log(`cp`)
            }
        }
    })
</script>
  • 报错图示:

 

  • 分析

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

  • 解决

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

 

7.2.6. 报错: Duplicate keys detected

错误描述: 发现重复的key

  • 有问题代码
<script src="./vue.js"></script>

<div id="app">
  <ul>
    <li v-for="item in list" :key="item.id">
      {{item.name}}
    </li>
  </ul>
</div>

<script>
  const vm = new Vue({
    el: '#app',
    data: {
      // 这里有重复id
      list: [
        { id: 1, name: 'react' },
        { id: 2, name: 'vue' },
        { id: 1, name: 'angular' }
      ]
    }
  })
</script>
  • 报错图示:

 

 

  • 分析

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

  • 解决

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

 

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <ul>
    <li v-for="item in list" :key="item.id">
      {{item.name}}
    </li>
  </ul>
</div>

<script>
  const vm = new Vue({
    el: '#app',
    data: {
      // 这里有重复id
      list: [
        { id: 1, name: 'react' },
        { id: 2, name: 'vue' },
        { id: 3, name: 'angular' }
      ]
    }
  })
</script>

7.2.7. 报错: the data option should be a function

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

  • 有问题代码:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app"></div>

<script>
Vue.component('add-component', {
    // 错误!!
    data: {
        name: 'cp'
    }
})
const vm = new Vue({
    el: '#app'
})
</script>
  • 报错图示:

  • 分析

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

  • 解决:

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

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app"></div>

<script>
Vue.component('add-component', {
    // 正确
    data(){
        return {
            name:'cp'
        }
    }
})
const vm = new Vue({
    el: '#app'
})
</script>

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

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

  • 有问题代码:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
    <add-component></add-component>
</div>

<script>
    Vue.component('add-component', {
        template: `
<div></div>
<p></p>
`
    })

    new Vue({
        el: '#app'
    })
</script>
  • 报错图示:

  • 分析:

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

  • 解决:

只写一个根元素

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
    <add-component></add-component>
</div>

<script>
    Vue.component('add-component', {
        template: `
<div></div>
`
    })

    new Vue({
        el: '#app'
    })
</script>

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

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

  • 有问题代码
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app"></div>

<script>
  // 错误!!
  Vue.component('header', {
    data(){
      return {}
    }
  })
  const vm = new Vue({
    el: '#app'
  })
</script>
  • 报错图示:

 

  • 分析

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

  • 解决

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

 

7.2.10. 报错: Unknown custom element

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

  • 有问题代码
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
    <father-component></father-component>
</div>

<script>
    Vue.component('father-component', {
        template:`
<div>
我是父组件
<son-component></son-component>
    </div>
`
    })
    const vm = new Vue({
        el: '#app',
        components:{
            'son-component':{
                template:`
<div>我是子组件</div>
`
            }
        }
    })
</script>
  • 报错图示:

 

  • 分析

    组件 并没有在父组件 中注册,所以并不能正常使用,大家一定要记着,全局组件在每一个vue实例的模板中都能正常使用,而局部注册的组件只有在父组件的components选项中注册时候才能使用

  • 解决

在父组件的components中注册一下组件即可

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <father-component></father-component>
</div>

<script>
  Vue.component('father-component', {
    template:`
      <div>
        我是父组件
        <son-component></son-component>
      </div>
    `,
    // 注册局部组件!!!
    components:{
      'son-component':{
        template:`
          <div>我是子组件</div>
        `
      }
    }
  })
  const vm = new Vue({
    el: '#app'
  })
</script>
  • 总结: 谁用谁注册哦~全局的不用注册, 直接用

7.2.11. 报错: Failed to mount component: template or render function not defined

错误描述: 无法装载组件:未定义模板或呈现函数

  • 有问题代码:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
    <add-component></add-component>
</div>

<script>
    Vue.component('add-component', {
        data() {
            return {}
        }
    })
    new Vue({
        el: '#app'
    })
</script>

 

  • 报错图示:

  • 分析

    尝试渲染组件,但是组件中既没有tempalte选项又没有render函数,因为vue组件的渲染最终是要执行render函数的,如果render函数存在就以render函数为准,如果render函数不存在,则会把template选项编译成为render函数再执行 所以这俩个需要申明其中的一个

  • 解决

申明template选项或者申明render函数

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  Vue.component('add-component', {
    template:`
     <div>this is add-component</div>
    `,
    data() {
      return {}
    }
  })
  new Vue({
    el: '#app'
  })
</script>

7.2.12. 报错: Avoid mutating a prop directly since the value will be overwritten

错误描述: 避免直接改变属性,因为值将被覆盖

  • 有问题代码
<script src="./vue.js"></script>
<div id="app">
    <add-component title="this is title"></add-component>
</div>
<script>
        Vue.component('add-component', {
        props: {
            title: {
                type: String
            }
        },
        template: `
<div>
{{title}}
<button @click="change">修改数据</button>
</div>
`,
        methods:{
            change(){
                // 尝试直接修改父组件传过来的数据
                this.title = 'new title'
            }
        }
    })
new Vue({
    el: '#app'
})
</script>
  • 报错图示:

  • 分析:

    上面的代码中,title数据来源于父组件,在子组件按钮点击时尝试直接修改title数据,基于vue单向数据流的要求,我们不能反向子组件直接修改父组件的数据 所以会报错

  • 解决:

可以通过事件传递的方式,通过调用父组件的一个方法进行修改title数据,这样的话就符合父组件修改自己数据的要求,或者我们可以把props中的title赋值给子组件data中的一个新的值,让它成为子组件自己的数据,这样的话就可以子组件自己修改了

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <add-component title="this is title"></add-component>
</div>

<script>
  Vue.component('add-component', {
    props: {
      title: {
        type: String
      }
    },
    data() {
      return {
        childTitle: this.title
      }
    },
    template: `
     <div>
      {{childTitle}}
      <button @click="change">修改数据</button>
     </div>
    `,
    methods: {
      change() {
        this.childTitle = 'new title'
      }
    }
  })

  new Vue({
    el: '#app'
  })
</script>

 

7.2.13. 报错: Computed property "xxx" was assigned to but it has no setter

错误描述: 计算属性想被赋值, 但是它没有setter方法

  • 有问题代码
<div id="app">
<input type="checkbox" v-model="isAll">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
    el: "#app",
    computed: {
        isAll(){
            return true;
        }
    }
})
</script>
  • 报错图示:

  • 分析:

    发现v-model会把标签的value值/状态值绑定给v-model指定的变量, 而变量又是给计算属性, 计算属性默认只返回值, 不是给它赋值

  • 解决:

    修改computed里的代码即可, 给计算属性一个set的机会, 但是千万不要在这里给计算 属性赋值, 会引起递归的

computed: {
    isAll: {
        set(val) { // 设置isAll的值的时候触发此方法, 传入要设置的值
            // val是全选框的true/false的值
            this.arr.map(obj => {
                obj['checked'] = val;
            })
        },
        get() {
            return this.arr.every(obj => obj['checked'] == true);
        }
    }
}

7.2.14. 报错: avoid using JavaScript unary operator as property name

错误描述: 避免使用JavaScript一元运算符作为属性名

  • 有问题代码
<tr v-for="(obj, index) in list">
    <td>{{ obj.id }}</td>
<td>{{ obj.name }}</td>
<td>{{ obj.time }}</td>
<td>
    <button @click="delete(index)">删除</button>
</td>
</tr>
  • 报错图示:

  • 分析:

报错的意思是说你使用了一元运算符作为属性名, 而且报错里一直说delete有问题

后来百度一查发现delete是个关键字

所以以后不要用delete作为变量名/方法名哦
  • 解决:

    把delete换个名字使用和定义即可

<tr v-for="(obj, index) in list">
    <td>{{ obj.id }}</td>
<td>{{ obj.name }}</td>
<td>{{ obj.time }}</td>
<td>
    <button @click="delBtn(index)">删除</button>
</td>
</tr>


methods: {
    delBtn(index){
        // 2. 给删除按钮绑定点击事件 - 传递过来对应绑定的index索引值
        // 删除数组里对应的元素, vue会自动更新页面
        this.list.splice(index, 1);
    }
}

7.2.15. 报错: Templates should only be responseible for mapping the state to the UI

错误描述: 模板应该只负责将状态映射到UI

  • 有问题代码
<body>
    <div id="app">
        <ul>
            <li v-for="item in arr">{{item}}</li>
        </ul>

        <!-- 2. 引入 vue.js-->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            // 3. 实例化vue对象 (把视图配置进来让vue解析)
            new Vue({
                el: "#app", // 指向视图的名字(选择器/dom标签)
                data: { // vue世界用到的变量
                    arr: ["春天", "夏天", "秋天", "冬天"] // 变量名叫arr, 值是一个数组4个元素
                }
            })

        // 哇哦, 真香
        </script>
    </div>
</body>

</html>
  • 报错图示:

  • 分析:

报错说只负责把状态更新到UI, 而且下面波浪线画的是script标签, 说明你script不是模板代码啊

Vue会把#app指定标签内的代码认为是模板代码, 怎么把script也认为了? 

看代码结构, 发现把script写#app标签里了我的天啊...
  • 解决: 把script标签等拿出来啊

7.3. 拼写类错误

7.3.1. 报错: Error in mounted hook: "TypeError: xxx is not a function"

错误描述: xxx不是一个方法

  • 有问题代码:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
</div>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      name: "cp"
    },
    // 拼写类错误
    method:{
      add(){}
    },
    mounted(){
      this.add()
    }
  })
</script>
  • 报错图示:

  • 分析

  此类错误并不会直接告诉你是拼写错了,如果你发现貌似根据错误提示怎么找都找不到,那么试  着检查下,vue的配置项是不是拼写错了

  • 解决: methods 配置项

7.4. 其他错误

7.4.1. 报错: this.getOptions is not a function 

错误描述: this.getOptions不是一个方法

  • 代码环境: @vue/cli - 内部是webpack4.x版本, 而less-loader我们下的8.x版

  • 报错图示:

  • 分析

根据别的提示说我less相关有问题, 去百度下蓝色指向的这句关键字吧

  • 解决

百度上很多人遇到了, 让我下载less-loader除了8以外的版本

  • 具体为啥less-loader8.x版本就不行了呢? 因为webpack4.x配置引入less-loader方式 和less-loader8不同, 具体参考这个文档

TypeError: this.getOptions is not a function - SegmentFault 思否icon-default.png?t=M3K6https://segmentfault.com/a/1190000039190699

7.4.2. 报错: spawn cmd ENOENT

错误描述: spawn命令无法运行

  • 报错图示:

  • 分析

    改端口号出现这个问题, 应该是电脑的命令未找到, 通过百度得知, 需要给环境变量配置system32下的命令

  • 解决:

    打开电脑的环境变量, 添加system32 或者你没有%SystemRoot%变量就换成这个填进去(最好挪到环境变量最上面) C:\Windows\System32

 

7.4.3. 报错: Invalild options in vue.config.js 

错误描述: 在vue配置文件中非法的选项

  • 报错图示:

 

  • 分析

    看报错提示红色, 在vue.config.js中 devServe不被允许, 知道devServer才是正确的选项对吧?

  • 解决:

    把devServe 改成 devServer即可

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值