vue編譯後調試源碼

❶ 如何在WebStorm 2017下調試Vue.js + webpack

有人覺得vue項目難調試，是因為用了webpack。所有代碼揉在了一起，還加了很多框架代碼，根本不知道怎麼下手。所以vue+webpack調試要從webpack入手。我們先從一般情況開始說。-sourcemapwebpack配置提供了devtool這個選項，如果設置為『#source-map』，則可以生成.map文件，在chrome瀏覽器中調試的時候可以顯示源代碼。devtool:'#source-map'然而這個設置實際上沒這么簡單。webpack官方給出了7個配置項供選擇:戳這里devtool介紹這里不同的配置有些不同的效果，比如是否保留注釋、保留行信息等，具體每一條什麼意思這里不詳解釋，有興趣的童鞋可以參考這篇文章官方默認的是用『#cheap-mole-eval-source-map』devtool:'#cheap-mole-eval-source-map'設置好之後，在vue項目調試的時候，代碼裡面標注debugger的時候就能看到對應的代碼了，非常方便。debugger或者，直接找到對應的文件。在chrome用』ctrl(command)+p『，輸入文件名，可以找到對應的源代碼。command+p打斷點：斷點需要注意的是，這里斷點會打在下一行。同時一行代碼運行在它的下一行才算執行。-vue-clivue家的項目腳手架，推薦使用。vue-cli老家在這里vue-cli可以幫我們自動搭建項目，首先npm全局安裝npminstall-gvue-cli然後創建一個新的項目vueinitwebpackmy-project一路回車，搞定。(配置項請參考上面給出的vue-cli鏈接)這里從網上下載了一個帶webpack的vue項目(跑之前記得npminstall一下)vue-cliwebpack從bulid文件夾裡面就大概能看出：•webpack.dev.conf:開發模式用•webpack.prod.conf:生產模式用其中，開發模式提供了devtool為』#cheap-mole-eval-source-map』，生產模式根據config文件夾下的proctionSourceMap變數控制是否使用。若為true，則devtool為』#source-map』其他使用方法一致。非常方便。線上調試平時開發的時候，我們用webpack的熱載入，可以省去掛載調試的步驟，非常方便。但是發布後部署到伺服器上，就失去了這個本地優勢。如果使用掛載文件方式會比較麻煩。由於webpack打出來的文件有版本號這些信息，而且發布一個包看代碼量可能需要等待不等，這個方案不實際。但是如果掛載的是熱載入到埠下的文件的話，這個問題就很好了。-熱載入在此之前，先來分析一下webpack的熱載入原理。對項目抓包可以發現這么一個文件：__webpack_hmr__webpack_hmr這是webpack熱載入的伺服器推送事件，eventsource類型，功能和websocket有點類似。大致作用是建立一個不會停止的stream流鏈接，伺服器發送更新數據回來append到流的末端，前端讀取最新append的數據，然後動態的更新頁面上的東西。接下來我們觀察下上文提到的更新數據有哪些。隨便更新一個文件，觸發熱載入，再抓個包，發現有兩個.hot-update.json和一個.hot-update.js文件熱載入更新文件這些具體做了些啥我不知道，這里就不深究了。應該是根據json裡面的數據，達到一個准確更新的效果。所以熱更新其實就是監聽伺服器上的數據，有修改的話伺服器發送數據過來，前端把數據拿來後替換到頁面上這么一個過程。-AutoResponder接下來談談線上掛載測試，這里推薦一款軟體：fiddlerfiddler有一個功能叫做AutoResponder，它可以將一個地址指向另一個地址。之所以用這個軟體，是因為它能匹配正則，非常方便。AutoResponder上一節說到，webpack熱載入用到了這幾類文件•__webpack_hmr•xxxxxxxxxxx.hot-update.json•xxxxxxxxxxx.hot-update.js

❷ 安裝好vue devtools後,運行程序打開調試,vue裡面空白

1、安裝node，vue運行需要基於npm一定的版本，所以首先升級npm到最新的版本，而在安裝的過程中個人比較喜歡淘寶的鏡像，所以先安裝cnpm（因為速度和穩定性都比較好） 2、在目標文件夾下打開終端 3、執行cnpm install vue-cli -g 全局安裝 運行vu

❸ vue: WebStorm設置快速編譯運行的方法

WebSorm是一款優秀的前端開發工具，而Vue項目可以使用Node進行編譯運行，平常我們可以通過命令行部署項目進行調試。
本文介紹設置Webstorm進行快速部署Vue項目。
第一步
點擊啟動快捷按鈕旁邊的向下小箭頭，在列表中選擇Edit選項：
第二步
打開啟動設置頁面後，點擊左上角的加號添加新的運行方式：
第三步
在彈出的選擇框中，選擇node.js啟動模式：
第四步
在新打開的設置頁面中，在紅色圈中的地方設置如圖路徑的文件：
至此設置成功，直接點啟動按鈕就可以部署項目。
以上這篇vue:
WebStorm設置快速編譯運行的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:webstorm添加*.vue文件支持webstorm添加vue.js支持的方法教程webstorm中vue語法的支持詳解webstorm和.vue中es6語法報錯的解決方法詳解Webstorm
新建.vue文件支持高亮vue語法和es6語法

❹ 怎麼保存這個網站的源碼這個是vue寫的模版，我想把這個源碼導出來，反編譯vue源碼

反編譯需要js.map文件；一般部署的時候回刪掉

❺ 如何用intellij idea調試vue

3種調試方式

1、WebStorm + Chrome

在WebStorm中啟動調試時，WebStorm會根據你設置的url，自動打開新的Chrome瀏覽器進程訪問這個設置的url，而且這個瀏覽器頁面和你平常看到的瀏覽器差異會比較大，看不到書簽欄，也看不到先前所裝的所有插件。

2、Visual Studio Code調試

Visual Studio Code + Chrome 也可以調試，也能支持在Visual Studio Code源代碼處加斷調試，當代碼執行流運行到這個地方後，也會中斷暫停運行，並在調試窗口顯示本地變數的值以及堆棧，還可以在Debug Console里執行表達式。

3、Chrome直接調試

在Chrome中也可以打開調試窗口，找到source，然後在源代碼處打斷點，當代碼執行到斷點處也會暫停執行，然後有一個很小的窗口顯示環境變數的值。

(5)vue編譯後調試源碼擴展閱讀

准備環境：

1、在chrome中安裝插件 JetBrains IDE Support (古月: 實際測試, 不需要該插件也行)

2、創建demo項目 vue init webpack vuejs-webpack-project

3、修改source map打開config/index.js文件, 修改source map屬性，從cheap-mole-eval-source-map改為source-map

❻ Vue源碼里函數聲明這樣寫是什麼語法 test

中是否聲明了abc()函數原型，然後test.c中使用#include "路徑名/fish.h"來包含它，注意，不能使用#include <fish.h>，因為前者是告訴編譯器到你指定路徑去搜索fish.h文件，後者是告訴編譯器在系統的標准頭文件路徑去搜索fish.h文件，所以用後邊的形式時，編譯器找不到這個頭文件。
另外，你這個問題應

❼ 現在想讓Vue在調試時候,對Vue環境配置應該如何設置。如何改變Vue環境的埠

一般是在webpack當中配置。
可以直接搜索你當前的埠號，找到相應的文件，進行修改後重新啟動，就可以看到埠號的改變了。

❽ Vue正式上線項目都是編譯之後的嗎

對，都是編譯後的，就像後端，也是編譯後的

❾ vue編譯後的js和map文件修改不了嗎

無法還原，編譯後的js為壓縮文件，很多代碼都不存在了

❿ 慕課網上沒搜到vue源碼，有沒有課程透徹分析Vue 源碼的

有，你在實戰里找是huangyi講的，印象中是從 Vue 的跨平台編譯入手，從 Vue 的幾個核心能力開始分析Vue 源碼。 Vue 的靜態全局 API 與屬性， Vue 的響應式原理，非同步組件、組件化、diff 演算法等等方面，都是進行了詳細的分析，最後還附帶了vuex和vuerouter。