這篇文章主要講解了“如何調試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 = {...}”即可。
本文操作環(huán)境:windows7系統(tǒng)、vue2.9.6版,DELL G3電腦。
vuejs怎么調試?vuejs如何調試代碼
使用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瀏覽器中調試的時候可以顯示源代碼,效果如下:
cheap-module-eval-source-map
選項效果:
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
是基于webpack的打包的效果和上面的一樣,只是配置不一樣。
在vue.config.js
文件中加如下配置即可:
module.exports = { configureWebpack: { devtool:'souce-map' } }
vscode 調試一直有問題,debug模式已啟動一會就一定卡死,嘗試很多方式沒成功過,待續(xù)吧......
感謝各位的閱讀,以上就是“如何調試vuejs”的內容了,經過本文的學習后,相信大家對如何調試vuejs這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián),小編將為大家推送更多相關知識點的文章,歡迎關注!