❤ vue 报错归纳篇（七千字总结）

❤ vue 报错归纳篇

数据

（数据）Cannot read properties of null (reading ‘name’)

前端异常：Cannot read properties of null (reading ‘name‘)

解决： 数据库有一条为空的数据，前端没有做封装，无法读取为null的数据

基础语法

（语法css符号） Missed semicolon

仔细检查css发现 缺少了;

vue语法

（vue语法）Duplicate keys detected: ‘/screening’. This may cause an update error. found in

Duplicate keys detected: '/screening'. This may cause an update error. found in

原因：
错误原因：v-for循环时设置的key值不是唯一的

解决方法 
v-for 循环val in demmlist  :key="val.id" => (val,index) in demolist :key="index"

（vue语法）Duplicate keys detected: ‘contablist‘. This may cause an update error.

问题

原因：

错误描述：Duplicate keys detected. This may cause an update error.
错误直译：检测到重复的键。这可能会导致错误。
错误原因：有相同父元素的多个子元素的v-for有相同的key值

dataList: [
            { id: 1, name: 'A' },
            { id: 2, name: 'B' },
            { id: 3, name: 'C' }
  ]

<span v-for="(item, index) in dataList" :key="index">{{item.name}}</span>
<hr />  <!-- 分割线 -->
<span v-for="(item, index) in dataList" :key="index">{{item.name}}</span>

解决方法：

 <sidebar-item v-for="(child,index) in item.children" 
 :key="child.path+index" :is-nest="true" 
 :item="child" 
 :base-path="resolvePath(child.path)" 
 class="nest-menu" />

（语法-vue2） v-for和v-if一起使用时的坑

报错：
The 'msg5' variable inside 'v-for' directive should be replaced with a computed property that returns filtered array instead. You should not mix 'v-for' with 'v-if'.eslin

（语法-promise）Uncaught (in promise) Error

.then()   //背后要添加
.catch(err => {
        this.$message.error(err.message);
        console.log(err);
      })

（语法-数据处理） 报-Cannot read property ‘split’ of null at a.contenbox

Error in created hook: “TypeError: Cannot read property ‘split‘ of null“

分析是其中一个split截取成为了 英文=>中文 
str.split(",");  =>  (str || " ").split(",");

（语法-forEach） 报Cannot read property ‘forEach‘ of undefined

forEach ，用来遍历对象，如果为undefined，没有属性，就会错误。

解决思路:在遍历对象之前判断对象是否为空，然后再去遍历该对象。

//遍历之前检查是否存在，否则会报错：Cannot read property 'forEach' of undefined

    if (!this.authority_list) {
      return
    }

（机制-vue2 $nextTick） 报 incongruent status: enter at Mi.checkStatus**

1、经测试好像是vant框架的问题，删除了Toast提示框就不会出现了，但是问题出在哪里啊，实在搞不明白，程序并没有崩溃，正常运行，各功能也正常
2、_this.$nextTick  
里面写上 Toast.clear();   
实际测试不起作用

（引用文件版本写法问题-Vue 2）打包 Vue js引用警告 "export ‘default’ (imported as ‘Api’) was not found in ‘./api’

方法1：修改引用js的地方

将import Api from './api'
改成import * as Api from './api'

在api.js中写法

export function getTestAPI() {
    xxx
}

方法2：修改js文件中的function

改成
exports.getTestAPI = function () {
 xxxx
}

方法3：修改js文件export方式

function getTestAPI() {xxx}
	export default getTestAPI{}
}

（语法）vue清除定时器Bug

​
❤ vue清除定时器Bug
页面加载，清除定时器 clearTimeout(intm)
问题
遇见的需求是：webapp 从A页面进入B页面,B页面点击按钮，加载完B页面的加载效果进入c，从C页面返回A页面，仍然显示B页面的加载效果

结果定时器一直无法清除在destory销毁之中。后来反复查找修改无果。多次翻看以后，突然之间发现一个问题，就是加载的页面的窗口我并没有进行隐藏，直接【_this.showTap=false】，解决掉了问题。

timer1 = setInterval(function() {
 if (_this.numsheCount < 100) {                                         _this.numsheCount++;
if (_this.numsheCount >= 0 && _this.numsheCount < 15) {
    _this.text = '努力...';
} else if (_this.numsheCount < 20) {
_this.text = '正在...';
	} else if (_this.numsheCount < 25) {
		_this.text = '准备分析...';
	} else if (_this.numsheCount < 50) {
		_this.text = '分析中...';
	} else if (_this.numsheCount >= 99) {
		_this.text = '久等了亲，已分析完毕!...';
		}
	} else {
		 clearInterval(timer1)
		 setTimeout(function() {
		_this.localStorage.setItem('xyuid', _this.value);
			_this.$router.push('saogao')
			_this.zhuan = false;
		}, 50)
 }
}, 30)

（语法）获取元素container.getBoundingClientRect is not a function

控制台输出：container.getBoundingClientRect is not a function
❤ container.getBoundingClientRect is not a function at xxx

container.getBoundingClientRect is not a function at HTMLDivElement.handleScroll

❤ 原因 ：document.getElementById(“yujing”) ；获取不到元素
❤ 解决： 检查这个id元素，写上对应名字

element

（element）Cannot read property ‘validate‘ of undefined

报错提示信息:
TypeError: Cannot read property ‘validate’ of undefined

原因

解析: 错误导致的原因是 el-form表单中的 ref="dataForm"和表单提交时this.$refs.dataForm.validate()名字交的不一致,或者是ref这个就没有定义.

（element） Failed to resolve directive: loadingps

[Vue warn]: Failed to resolve directive: loadingps

按需引入Element UI报的这个错误

这个错误是由于使用v-loading="loading"属性报的错，解决方案如下：

v-loading=“loadingps” => v-loading=“loading”

（element-不常见）Error in directive infinite-scroll inserted hook: "TypeError: Failed to execute ‘observe’ on ‘MutationObserver’: parameter 1 is not of type ‘Node’.（使用element中v-infinite-scroll ）

一般出现这个问题是导包的原因

① nuxt的版本与element-ui版本不匹配

import ‘element-ui/lib/theme-chalk/index.css’;

原因：可能是nuxt的版本与element-ui版本不匹配，毕竟前端的东西更新快，兼容性就有了问题。如果你的nuxt是1.0的版本，就应该是这个问题了

解决办法：element-ui版本太高，降低element-ui版本就行了

版本：2.10.1 —> 1.4.13

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(ElementUI)

再次验证：

② vue框架element-ui中v-infinite-scroll 引发的问题

滑动的时候会提示
Uncaught TypeError: container.getBoundingClientRect is not a function

网上找了很多资料最后对比发现，区别在于滚动的容器没有固定高度，于是我立当加上高度

然而不是这个的原因:
我的数据中是依赖 [].length>0 然后生效，v-if不会保留dom结构，每次加载新数据的时候，我对dataList做清空。我把dataList=[]这行代码注释掉，滚动加载一切正常
所以其实，我做搜索操作的时候修改了dataList的长度，但是滚动条的位置却没有更改，所以会失效。
我一不做二不休加个v-if，问题完美解决

（element版本-vue2）Emitted value instead of an instance of Error the “scope” attribute for scoped slots have

（发出的值而不是错误实例）自2.5版以来，作用域插槽的“scope”属性已被弃用并替换为“slot scope”。除了之外，新的“slot scope”属性还可以用于普通元素，以表示作用域的插槽。

解决方案

根据警告的信息按照路径，找到出现警告的文件Table.vue，
将scope属性替换成slot-scope，scope 属性在2.5以后的版本中已经废弃，被slot-scope替代

scope  =>  slot-scope

其他

（未知）undefined is not iterable (cannot read property Symbol(Symbol.iterator

undefined is not iterable (cannot read property Symbol(Symbol.iterator
原因：可能是数组未定义
解决： 赋值，待定
undefined is not iterable (cannot read property Symbol(Symbol.iterator

路径

（路径错误）Failed to load module script: Expected a JavaScript module script but the server respond

错误内容

xxx.86eb4fa7.js:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “text/html”. Strict MIME type checking is enforced for module scripts per HTML spec.
————————————————
乍一看报错是因为：【xxx.86eb4fa7.js】这个js的文件类型不正确，服务器没有返回我们期望的js类型，而是返回了【“text/html”】这个类型

注意！！不要被错误本身的意思给迷惑住！！
这个问题是因为，上线的时候资源不足，某些文件没有成功部署，具体来说。就是找不到这个【xxx.86eb4fa7.js】文件 。
所以，重新上线一下，保证这个资源在服务器上存在，就可以了。

脚手架

（脚手架） “npm uninstall xxx“卸载 后，并没有从package.json中去掉

"npm uninstall/remove xxx"后，不自动更新package.json，把xxx从

dependencies、devDependencies、optionalDependencies中去掉。

需要加上对应参数：

-S, –save：dependencies

-D, –save-dev：devDependencies

-O, –save-optional：optionalDependencies

方法：移出package.json对应版本 需要添加 -S

npm uninstall xxxx -S  

依赖

（依赖-vue2） Module not found

ERROR in ./src/main.js
Module not found: Error: Can't resolve './components/payments' in 'D:\xm\vue_wzh_demo\src'
 @ ./src/main.js 25:0-45
 @ multi (webpack)-dev-server/client?http://localhost:8084 webpack/hot/dev-server babel-polyfill ./src/main.js

大致意思就是：Module not found: Error: Can't resolve 'XXX' in 'XXXX'

解决方案：手动导入依赖

npm i XXX --save
npm uninstall XXX
npm i XXX --save

这个依赖是自己写的，最后暂时注释掉。

打包编译

（打包编译依赖vue2）Error in v-on handler: “ReferenceError: XXX is not defined（vue2）

猜测是没有导入相对应的Vue的依赖，所以导致的问题。

解决：

更改打包出口路径，部署时候部署dist目录，解决问题。

（打包编译-未知）Indicate whether a cookie is intended to be set in a cross-site context by specifying its SameSite attribute

Indicate whether a cookie is intended to be set in a cross-site context by specifying its SameSite attribute
- 通过指定cookie的SameSite属性，指示是否要在跨站点上下文中设置cookie

Webpack错误

You may need an appropriate loader to handle this file type, currently no loaders are

报错

原因
系统用 Webpack4，组件库用 Webpack5。存在 ES 版本及转换问题；

解决
vue.config.js 文件中设置属性 transpiledependencies

 module.exports = {
     transpileDependencies: ['your-webcomponents'],
 }

此外改装源码可能还需要的依赖

需要安装一部分依赖
 
  babel-plugin-syntax-jsx
  babel-plugin-transform-vue-jsx
  babel-helper-vue-jsx-merge-props
  babel-preset-env
 
npm install babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props babel-preset-env --save-dev