首頁  >  文章  >  web前端  >  vuejs怎麼調試

vuejs怎麼調試

藏色散人
藏色散人原創
2021-11-02 14:10:372618瀏覽

vuejs調試的方法:1、使用Vue-cli命令列工具初始化基於wabpack模板的項目,並更改devtool配置為source-map;2、在vue.config.js檔案中新增配置「module .exports = {...}”即可。

vuejs怎麼調試

本文操作環境:windows7系統、vue2.9.6版,DELL G3電腦。

vuejs怎麼調試? vuejs如何調試程式碼

基於webpack的設定偵錯

使用Vue-cli命令列工具初始化基於wabpack模板的專案的命令語法:

npm install -g @vue/cli                  # 全局安装vue-cli,版本vue3.x
vue init webpack [my-project] [app-name] # 使用vue-cli初始化一个完整的webpack项目。
cd my-project                            # 进入目录
npm install                              # 安装依赖 (package.json)
npm start                                # 启动开发环境版本

config/index.js檔案中更改devtool配置為source-map

module.exports = {
     devtool: 'source-map',//默认是:cheap-module-eval-source-map
}

設定為source-map ,則可以產生.map文件,在chrome瀏覽器中調試的時候可以顯示原始碼,效果如下:

vuejs怎麼調試

cheap- module-eval-source-map選項效果:

vuejs怎麼調試

webpack中devtool的其它選項各代表什麼呢:

  • eval :文檔上解釋的很明白,每個模組都封裝到eval 包起來,並在後面添加//# sourceURL
  • source-map :這是最原始的source-map 實作方式,其實作是打包程式碼同時建立一個新的sourcemap 文件,並在打包文件的末尾添加//# sourceURL 註解行告訴JS 引擎檔案在哪裡
  • #hidden -source-map :文檔上也說了,就是soucremap 但沒註釋,沒註解怎麼找文件呢?看起來只能靠後綴,譬如xxx/bundle.js 文件,某些引擎會嘗試去找xxx/bundle.js.map
  • inline-source-map :為每一個文件新增sourcemap 的DataUrl,注意這裡的檔案是打包前的每一個檔案而不是最後打包出來的,同時這個DataUrl 是包含一個檔案完整souremap 資訊的Base64 格式化後的字串,而不是一個url。
  • eval-source-map :這就是把eval 的sourceURL 換成了完整souremap 資訊的DataUrl
  • cheap-source-map :不包含列信息,不包含loader 的sourcemap,(譬如babel 的sourcemap)
  • cheap-module-source-map :不包含列信息,同時loader 的sourcemap 也被簡化為只包含對應行的。最終的 sourcemap 只有一份,它是 webpack 對 loader 產生的 sourcemap 進行簡化,然後再次產生的。

參考:webpack sourcemap 選項多種模式的一些解釋

#基於vue-cli的設定偵錯

vue- cli是基於webpack的打包的效果和上面的一樣,只是配置不一樣。

vue.config.js檔案中加上以下配置即可:

module.exports = {
    configureWebpack: {
        devtool:'souce-map'
    }
}

vscode編輯器偵錯

vscode 偵錯一直有問題,debug模式已啟動一會兒就一定卡死,嘗試很多方式沒成功過,待續吧......

推薦:《最新的5個vue.js視頻教程精選

以上是vuejs怎麼調試的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn