Vue常見(jiàn)報(bào)錯(cuò)以及解決方案實(shí)例總結(jié)
前言
寫代碼的過(guò)程中一定會(huì)遇到報(bào)錯(cuò)，遇到報(bào)錯(cuò)不要擔(dān)心，認(rèn)真分析就可以解決報(bào)錯(cuò)，同時(shí)積累經(jīng)驗(yàn)，早日成為大牛?? 本文會(huì)整理一些在編碼過(guò)程中遇到的常見(jiàn)報(bào)錯(cuò)，共同學(xué)習(xí)。
一、報(bào)錯(cuò)結(jié)構(gòu)
報(bào)錯(cuò)信息一般會(huì)包含這幾部分：錯(cuò)誤類型、錯(cuò)誤位置、錯(cuò)誤描述、錯(cuò)誤規(guī)則和問(wèn)題數(shù)量。
如上圖：
報(bào)錯(cuò)類型為編譯錯(cuò)誤；
錯(cuò)誤位置在D:\myel\src\views\admin\AdminView.vue中的第四行第2個(gè)字符；（報(bào)錯(cuò)位置不一定每次都是準(zhǔn)確的，但是可以根據(jù)提示縮小范圍）
錯(cuò)誤描述 當(dāng)前錯(cuò)誤Mixed spaces and tabs指space空格和tab空格混合了（可根據(jù)翻譯來(lái)判斷錯(cuò)誤）；
錯(cuò)誤規(guī)則 no-mixed-spaces-and-tabs指space空格和tab空格不能混合使用；
錯(cuò)誤數(shù)量 統(tǒng)計(jì)當(dāng)前有幾個(gè)報(bào)錯(cuò) error需要解決，warning根據(jù)實(shí)際情況看需不需要立即解決。
二、常見(jiàn)問(wèn)題總結(jié)及解決方法
Mixed spaces and tabs
空格混合使用了
解決方法：1、在當(dāng)前頁(yè)面格式化代碼 2、在.eslintrc.js文件的rules中添加"no-mixed-spaces-and-tabs": "off"
Unexpected keyword 'const'
沒(méi)有預(yù)料到的關(guān)鍵字const
仔細(xì)看這幾行代碼就可以發(fā)現(xiàn)， 53行結(jié)尾的應(yīng)為分號(hào)寫成了逗號(hào)
解決辦法：將53行逗號(hào)改為分號(hào)
Module not found: Error: Can't resolve '....' in '....'
模塊找不到：不能resolve（兌現(xiàn)，發(fā)現(xiàn)，解決）../views/admin/DashVeiw.vue
在D:\myel\src\router
這種情況一般是路由中配置的文件路徑寫錯(cuò)了
解決辦法：將路徑改為正確路徑（小技巧：使用自動(dòng)提示的路徑或者復(fù)制文件名，避免手誤打錯(cuò)）
Element is missing end tag
元素缺少一個(gè)結(jié)束標(biāo)簽
是當(dāng)前文件的<div class="login">缺少后半個(gè)</div>
解決方法：分析好html的結(jié)構(gòu)，將缺少的結(jié)束標(biāo)簽添加上
TypeError: Cannot read properties of undefined (reading '...')
不能讀取undefined的屬性
原因是掛載時(shí)有dom節(jié)點(diǎn)但是數(shù)據(jù)還沒(méi)獲取，當(dāng)時(shí)那個(gè)數(shù)據(jù)可能為空
解決方法：在當(dāng)前標(biāo)簽（同時(shí)用了v-for的話就上一級(jí)標(biāo)簽）加上v-if判斷該數(shù)據(jù)是否存在
用[]或.指定數(shù)據(jù)時(shí)都可能會(huì)出現(xiàn)這個(gè)錯(cuò)誤，要記得使用v-if
TypeError: ...forEach is not a function
...沒(méi)有forEach方法
當(dāng)前數(shù)據(jù)不是個(gè)數(shù)組
解決方法：分析數(shù)據(jù)的結(jié)構(gòu)，找到真正需要遍歷的對(duì)象
'...' is not defined / no-undef
...沒(méi)有定義
解決辦法：找到報(bào)錯(cuò)位置，按照提示導(dǎo)入相應(yīng)關(guān)鍵字
總結(jié)
到此這篇關(guān)于Vue常見(jiàn)報(bào)錯(cuò)以及解決的文章就介紹到這了,更多相關(guān)Vue常見(jiàn)報(bào)錯(cuò)解決內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
基于Vue實(shí)現(xiàn)頁(yè)面切換左右滑動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了基于Vue實(shí)現(xiàn)頁(yè)面切換左右滑動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了Vue通過(guò)ref獲取dom元素屬性的方法,文中有詳細(xì)的方法介紹,對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-11-11
VUE引入騰訊地圖并實(shí)現(xiàn)軌跡動(dòng)畫的詳細(xì)步驟
這篇文章主要介紹了VUE引入騰訊地圖并實(shí)現(xiàn)軌跡動(dòng)畫,引入步驟大概是在 html 中通過(guò)引入 script 標(biāo)簽加載API服務(wù)，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-09-09
vue使用echarts實(shí)現(xiàn)立體柱形圖
這篇文章主要為大家詳細(xì)介紹了vue使用echarts實(shí)現(xiàn)立體柱形圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
Vue.js tab實(shí)現(xiàn)選項(xiàng)卡切換
這篇文章主要為大家詳細(xì)介紹了Vue.js組件tab實(shí)現(xiàn)選項(xiàng)卡切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
vue3使用Vite打包組件庫(kù)從0搭建過(guò)程詳解
這篇文章主要為大家介紹了vue3使用Vite打包組件庫(kù)從0搭建過(guò)程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要給大家介紹了關(guān)于Vue3中watchEffect用途的相關(guān)資料, watch和watchEffect都是監(jiān)聽(tīng)器,但在寫法和使用上有所區(qū)別,本文進(jìn)行了詳細(xì)的介紹,需要的朋友可以參考下2021-07-07
Vue.extend實(shí)現(xiàn)掛載到實(shí)例上的方法
這篇文章主要介紹了Vue.extend實(shí)現(xiàn)掛載到實(shí)例上的方法,結(jié)合實(shí)例形式分析了Vue.extend實(shí)現(xiàn)掛載到實(shí)例上的具體操作步驟與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-05-05
Vue自動(dòng)構(gòu)建發(fā)布腳本的方法示例
這篇文章主要介紹了Vue自動(dòng)構(gòu)建發(fā)布腳本的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
vue+elementui通用彈窗的實(shí)現(xiàn)(新增+編輯)
這篇文章主要介紹了vue+elementui通用彈窗的實(shí)現(xiàn)(新增+編輯)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01