Step 1:Chrome浏覽器添加vue-devtools插件
① 下載下傳vue-devtools源碼壓縮包:https://github.com/vuejs/vue-devtools
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsICM38FdsYkRGZkRG9lcvx2bjxiNx8VZ6l2cs0TPR1UMjpWTwkleNBDOsJGcohVYsR2MMBjVtJWd0ckW65UbM5WOHJWa5kHT20ESjBjUIF2X0hXZ0xCMx81dvRWYoNHLrdEZwZ1Rh5WNXp1bwNjW1ZUba9VZwlHdssmch1mclRXY39CXldWYtlWPzNXZj9mcw1ycz9WL49zZuBnL1cjNwMzN1IjMwIDOwkTMwIzLc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)
② 浏覽器位址欄輸入
chrome:version
轉到關于版本,檢視“個人資料路徑”(浏覽器配置檔案的存放位置),将zip中的vue-devtools-dev檔案夾解壓到該路徑下
③ Git Bash進入vue-devtools-dev工程目錄,安裝依賴:
安裝完成後編譯程式:
$ npm run build
編譯成功後,在目錄\vue-devtools-dev\shells\chrome\下找到manifest.json檔案,将
"persistent": false
改為
"persistent": true
④ 浏覽器位址欄輸入
chrome://extensions
轉到擴充程式,啟用“開發者模式”,點選“加載已解壓的擴充程式”按鈕,選擇目錄\vue-devtools-dev\shells\下的chrome檔案夾,插件添加成功!
Step 2:electron-vue項目添加vue-devtools插件
① 在項目目錄\ev-demo\src\main\下找到index.dev.js檔案,添加2行代碼:
BrowserWindow.addDevToolsExtension('C:/Users/89693/AppData/Local/Google/Chrome/User Data/Default/vue-devtools-dev/shells/chrome')
// chrome檔案夾所在的完整路徑位址
② 運作項目,控制台出現Vue标簽,即可使用vue-devtools啦!
以上。