這篇文章主要講解了“如何調(diào)試vuejs”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“如何調(diào)試vuejs”吧！

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

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

本文操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。

vuejs怎么調(diào)試？vuejs如何調(diào)試代碼

基于webpack的配置調(diào)試

使用Vue-cli命令行工具初始化基于wabpack模板的項(xiàng)目的命令語法：

npm install -g @vue/cli                  # 全局安裝vue-cli,版本vue3.x
vue init webpack [my-project] [app-name] # 使用vue-cli初始化一個(gè)完整的webpack項(xiàng)目。
cd my-project                            # 進(jìn)入目錄
npm install                              # 安裝依賴 (package.json)
npm start                                # 啟動(dòng)開發(fā)環(huán)境版本

在config/index.js文件中更改devtool配置為source-map：

module.exports = {
     devtool: 'source-map',//默認(rèn)是：cheap-module-eval-source-map
}

設(shè)置為 source-map，則可以生成.map文件，在chrome瀏覽器中調(diào)試的時(shí)候可以顯示源代碼,效果如下:

cheap-module-eval-source-map選項(xiàng)效果：

webpack中devtool的其它選項(xiàng)各代表什么呢：

• eval ：文檔上解釋的很明白，每個(gè)模塊都封裝到 eval 包裹起來，并在后面添加 //# sourceURL

• source-map ：這是最原始的 source-map 實(shí)現(xiàn)方式，其實(shí)現(xiàn)是打包代碼同時(shí)創(chuàng)建一個(gè)新的 sourcemap 文件， 并在打包文件的末尾添加 //# sourceURL 注釋行告訴 JS 引擎文件在哪兒

• hidden-source-map ：文檔上也說了，就是 soucremap 但沒注釋，沒注釋怎么找文件呢？貌似只能靠后綴，譬如 xxx/bundle.js 文件，某些引擎會(huì)嘗試去找 xxx/bundle.js.map

• inline-source-map ：為每一個(gè)文件添加 sourcemap 的 DataUrl，注意這里的文件是打包前的每一個(gè)文件而不是最后打包出來的，同時(shí)這個(gè) DataUrl 是包含一個(gè)文件完整 souremap 信息的 Base64 格式化后的字符串，而不是一個(gè) url。

• eval-source-map ：這個(gè)就是把 eval 的 sourceURL 換成了完整 souremap 信息的 DataUrl

• cheap-source-map ：不包含列信息，不包含 loader 的 sourcemap，（譬如 babel 的 sourcemap）

• cheap-module-source-map ：不包含列信息，同時(shí) loader 的 sourcemap 也被簡(jiǎn)化為只包含對(duì)應(yīng)行的。最終的 sourcemap 只有一份，它是 webpack 對(duì) loader 生成的 sourcemap 進(jìn)行簡(jiǎn)化，然后再次生成的。

基于vue-cli的配置調(diào)試

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

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

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

vscode編輯器調(diào)試

vscode 調(diào)試一直有問題,debug模式已啟動(dòng)一會(huì)就一定卡死，嘗試很多方式?jīng)]成功過，待續(xù)吧......

感謝各位的閱讀，以上就是“如何調(diào)試vuejs”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)如何調(diào)試vuejs這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！