首頁 > web前端 > Vue.js > 主體

vue的空白報錯怎麼辦

藏色散人
發布: 2022-12-21 10:30:31
原創
3338 人瀏覽過

vue空格報錯的解決方法:1、找到目錄build下的webpack.base.conf.js文件,把其中的rules註銷掉;2、重新執行“npm run dev”;3、打開test目錄下的.eslintrc.js文件,新增自訂規則;4、開啟rules,手動新增“no-mixed-spaces-and-tabs”,然後定義為0,關閉規則即可。

vue的空白報錯怎麼辦

本教學操作環境:Windows10系統、Vue 3版、Dell G3電腦。

vue的空格報錯怎麼辦?

vue空格報錯

建構了一個vue項目,在配置路有的時候,陸續出現了各種報錯其中最多的是一些寫法,例如空格,縮進,各種括號,結果我一句一句對照,修改相當之費時間,效率低,一上午,一個路由配置都沒寫好

主要報錯如下:

截取了一段常見報錯,選取其中一個:

Expected indentation of 4 spaces but found 1 tab
登入後複製

翻譯一下,意思是:預期縮排4個空格,但找到1個選項卡。意思是vue在偵測寫法規則的時候,只認空格,不認tab的縮進,這時你就要修改的頁面內容,把tab換成空格,這樣就比較麻煩,然鵝各種查找原因,找到了解決方案,如下:

一,找到目錄build下的webpack.base.conf.js文件,把其中的rules裡的這一段註銷掉:

保存,然後重新npm run dev 一下:

報錯雖然不見了,但是這樣做的弊端是,強行停止一切檢錯功能,很多語法錯誤檢測不出,在初期,是不建議這麼做的,更加不利於代碼的可讀行以及規範性。那麼就要尋找另一個辦法,只是改變一下規則裡的設定。

二,這就用到了另一個設定檔:test目錄下的.eslintrc.js檔(推薦)

新增你的自訂規則,然後推薦大家熟悉ESLint 規則

規則

在設定檔中可以設定一些規則。

規則的錯誤等級有三種:

“off” 或者 0:关闭规则。
“warn” 或者 1:打开规则,并且作为一个警告(不影响exit code)。
“error” 或者 2:打开规则,并且作为一个错误(exit code将会是1)。
登入後複製

為了讓你對規則有個更好的理解,ESLint 對其進行了分門別類別。

所有的規則預設都是禁用的。在設定檔中,使用 “extends”: “eslint:recommended” 來啟用建議的規則,報告一些常見的問題,在下文中這些建議的規則都帶有一個標記。

Possible Errors對照著來自訂規則配置

#以上面提到的報錯為例,是跟空格縮排有關,找到相關規則提示:

然後到rules裡,手動添加'no-mixed-spaces-and-tabs',然後定義為0,關閉規則

// 在这里添加自定义规则
'rules': {
// allow paren-less arrow functions
'arrow-parens': 0,
// allow async-await
'generator-star-spacing': 0,
// 禁止空格和 tab 的混合缩进
'no-mixed-spaces-and-tabs':0,
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
}
登入後複製

好了,保存刷新,你會發現報錯不再提示,這樣做的好處是,挑選需要忽略的規則

推薦學習:《vue.j影片教學

以上是vue的空白報錯怎麼辦的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
vue
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板