Vue常見報錯以及解決方案實例總結
前言
寫代碼的過程中一定會遇到報錯,遇到報錯不要擔心,認真分析就可以解決報錯,同時積累經驗,早日成為大牛?? 本文會整理一些在編碼過程中遇到的常見報錯,共同學習。
一、報錯結構
報錯信息一般會包含這幾部分:錯誤類型、錯誤位置、錯誤描述、錯誤規(guī)則和問題數量。

如上圖:
報錯類型為編譯錯誤;
錯誤位置在D:\myel\src\views\admin\AdminView.vue中的第四行第2個字符;(報錯位置不一定每次都是準確的,但是可以根據提示縮小范圍)
錯誤描述 當前錯誤Mixed spaces and tabs指space空格和tab空格混合了(可根據翻譯來判斷錯誤);
錯誤規(guī)則 no-mixed-spaces-and-tabs指space空格和tab空格不能混合使用;
錯誤數量 統(tǒng)計當前有幾個報錯 error需要解決,warning根據實際情況看需不需要立即解決。
二、常見問題總結及解決方法
Mixed spaces and tabs
空格混合使用了

解決方法:1、在當前頁面格式化代碼 2、在.eslintrc.js文件的rules中添加"no-mixed-spaces-and-tabs": "off"
Unexpected keyword 'const'
沒有預料到的關鍵字const

仔細看這幾行代碼就可以發(fā)現, 53行結尾的應為分號寫成了逗號
解決辦法:將53行逗號改為分號
Module not found: Error: Can't resolve '....' in '....'
模塊找不到:不能resolve(兌現,發(fā)現,解決)../views/admin/DashVeiw.vue
在D:\myel\src\router

這種情況一般是路由中配置的文件路徑寫錯了
解決辦法:將路徑改為正確路徑(小技巧:使用自動提示的路徑或者復制文件名,避免手誤打錯)
Element is missing end tag
元素缺少一個結束標簽

是當前文件的<div class="login">缺少后半個</div>
解決方法:分析好html的結構,將缺少的結束標簽添加上
TypeError: Cannot read properties of undefined (reading '...')
不能讀取undefined的屬性

原因是掛載時有dom節(jié)點但是數據還沒獲取,當時那個數據可能為空
解決方法:在當前標簽(同時用了v-for的話就上一級標簽)加上v-if判斷該數據是否存在
用[]或.指定數據時都可能會出現這個錯誤,要記得使用v-if
TypeError: ...forEach is not a function
...沒有forEach方法

當前數據不是個數組
解決方法:分析數據的結構,找到真正需要遍歷的對象
'...' is not defined / no-undef
...沒有定義

解決辦法:找到報錯位置,按照提示導入相應關鍵字
總結
到此這篇關于Vue常見報錯以及解決的文章就介紹到這了,更多相關Vue常見報錯解決內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vue3使用element-plus中el-table組件報錯關鍵字'emitsOptions'與&
這篇文章主要給大家介紹了關于vue3使用element-plus中el-table組件報錯關鍵字'emitsOptions'與'insertBefore'的相關資料,文中將解決方法介紹的非常詳細,需要的朋友可以參考下2022-10-10

