Vue常見報錯以及解決方案實例總結

Posted on by

前言

寫代碼的過程中一定會遇到報錯，遇到報錯不要擔心，認真分析就可以解決報錯，同時積累經驗，早日成為大牛👍 本文會整理一些在編碼過程中遇到的常見報錯，共同學習。

一、報錯結構

報錯信息一般會包含這幾部分：錯誤類型、錯誤位置、錯誤描述、錯誤規則和問題數量。

如上圖：

報錯類型為編譯錯誤；

錯誤位置在D:\myel\src\views\admin\AdminView.vue中的第四行第2個字符；（報錯位置不一定每次都是準確的，但是可以根據提示縮小范圍）

錯誤描述 當前錯誤Mixed spaces and tabs指space空格和tab空格混合瞭（可根據翻譯來判斷錯誤）；

錯誤規則 no-mixed-spaces-and-tabs指space空格和tab空格不能混合使用；

錯誤數量 統計當前有幾個報錯 error需要解決，warning根據實際情況看需不需要立即解決。

二、常見問題總結及解決方法

Mixed spaces and tabs

空格混合使用瞭

解決方法：1、在當前頁面格式化代碼 2、在.eslintrc.js文件的rules中添加"no-mixed-spaces-and-tabs": "off"

Unexpected keyword 'const'

沒有預料到的關鍵字const

仔細看這幾行代碼就可以發現， 53行結尾的應為分號寫成瞭逗號

解決辦法：將53行逗號改為分號

Module not found: Error: Can't resolve '….' in '….'

模塊找不到：不能resolve（兌現，發現，解決）../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節點但是數據還沒獲取，當時那個數據可能為空

解決方法：在當前標簽（同時用瞭v-for的話就上一級標簽）加上v-if判斷該數據是否存在

用[]或.指定數據時都可能會出現這個錯誤，要記得使用v-if

TypeError: …forEach is not a function

…沒有forEach方法

當前數據不是個數組

 解決方法：分析數據的結構，找到真正需要遍歷的對象

'…' is not defined / no-undef

…沒有定義

 解決辦法：找到報錯位置，按照提示導入相應關鍵字

總結

到此這篇關於Vue常見報錯以及解決的文章就介紹到這瞭,更多相關Vue常見報錯解決內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：