vue原始碼除錯踩坑記錄

2021-08-18 01:36:09 字數 1141 閱讀 8254

如果我們不用單檔案元件開發,一般直接引入開發版vue.js

這種情況下debug也是很方便的,只不過vue.js檔案**是rollup生成的

這種情況下debug,看原始碼也是很方便的

但是如果能夠在vue專案中的src目錄下中的檔案打斷點除錯就更好了。

那怎麼做到呢?

其實很簡單

1. 開啟 build/config.js 檔案

找到 genconfig() 函式

該函式下有個config物件,給該物件新增乙個屬性和值: sourcemap: true

2. 然後重新 npm run dev, 會發現dist目錄下多了乙個vue.js.map檔案

3. 最後在你的***.html(這裡start.html)引入vue.js, 在瀏覽器中開啟該***.html(這裡start.html)檔案, 就可以愉快的除錯了

然後就可以愉快debug了.這對我來說很重要,能不能debug決定了我有沒有耐心去看原始碼。

其實以前我最關心的是通過webpack打包後的檔案,斷點總是打偏,遇到這種情況

試試 在你想要打斷的地方,偷偷偷的寫上debugger,執行時會停在你所寫的地方,

這種方式我好像記得犀牛書上也有過,只不過就覺得在瀏覽器上直接打斷點很爽,爽過頭

就把該除錯方法慢慢的淡忘了。

感謝濤哥, 為我解答部分疑問。

開心的做乙個無憂無慮的碼農,爭取每天進步一點。

Vue踩坑記錄

解決方法如下 第一步 在靜態檔案下引入我們要更換的的 第二步 在index.html檔案中新增這樣一段 icon href static logo.png type image x icon shortcut icon href static logo.png type image x icon 展...

Vue踩坑記錄

官方文件沒有宣告元件名必須全小寫 vue.component my component name 但是我的第乙個vue元件踩了這個坑 hello,melodyjerry 錯誤顯示 hello,melodyjerry 正確顯示,應該是 this is a vue component.呼叫compute...

Vue踩坑記錄

一.使用import匯入外部js檔案,呼叫方法undefined 錯誤寫法 import from common js date.js console.log this.formatdate 原因 this表示vue的例項,並沒有這個方法,正確呼叫為不需要this import from commo...