如果我們不用單檔案元件開發,一般直接引入開發版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...