真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網站制作重慶分公司

如何調試vuejs

這篇文章主要講解了“如何調試vuejs”,文中的講解內容簡單清晰,易于學習與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學習“如何調試vuejs”吧!

成都創(chuàng)新互聯(lián)是專業(yè)的鄞州網站建設公司,鄞州接單;提供成都網站設計、網站建設,網頁設計,網站設計,建網站,PHP網站建設等專業(yè)做網站服務;采用PHP框架,可快速的進行鄞州網站開發(fā)網頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網站,專業(yè)的做網站團隊,希望更多企業(yè)前來合作!

vuejs調試的方法:1、使用Vue-cli命令行工具初始化基于wabpack模板的項目,并更改devtool配置為source-map;2、在vue.config.js文件中添加配置“module.exports = {...}”即可。

如何調試vuejs

本文操作環(huán)境:windows7系統(tǒng)、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                                # 啟動開發(fā)環(huán)境版本

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 實現(xiàn)方式,其實現(xiàn)是打包代碼同時創(chuàng)建一個新的 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 進行簡化,然后再次生成的。

基于vue-cli的配置調試

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

vue.config.js文件中加如下配置即可:

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

vscode編輯器調試

vscode 調試一直有問題,debug模式已啟動一會就一定卡死,嘗試很多方式沒成功過,待續(xù)吧......

感謝各位的閱讀,以上就是“如何調試vuejs”的內容了,經過本文的學習后,相信大家對如何調試vuejs這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián),小編將為大家推送更多相關知識點的文章,歡迎關注!


新聞名稱:如何調試vuejs
鏈接地址:http://weahome.cn/article/jgcppe.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部