vue-devtools安裝填坑

因爲使用Elenctron-vue的腳手架開發，在修改vue組件時，安裝vue-devtools更方便調試修改，遇到坑較多，所以整理如此下：

 

問題如下：

（1）有博客提供的源碼如下：（這只是源碼一部分Chrome文件夾，我親測了下無法使用）

 

2.有教程說，在vue-devtools文件夾下打開git bash,運行命令，但我的npm install 就會報錯，打開 cmd運行npm install就可以安裝，但運行npm run build又會出錯，顯示webpack-cli未找到模塊，然後就是各種模塊未安裝的問題,比如：Cannot find module 'webpack-cli' 等等。

  我個人安裝流程如下：

• 在谷歌瀏覽器中拓展程序中增加插件

（1)在github上下載壓縮包，github下載地址：https://github.com/vuejs/vue-devtools,解壓到本地盤上

  (2)打開cmd,到相應的文件下，使用yarn install(npm install可以成功，到build的時候會報錯，可能有的包模塊沒有下載

（3）npm run build

  (4)修改vue-devtools-dev\shells\chrome 目錄 manifest.json 文件，  設置"persistent": true

 （5）打開谷歌瀏覽器：設置 >> 更多工具 >> 擴展程序，並把 開發者模式 按鈕選爲 選中狀態，點擊 加載已解壓的擴展程序 按鈕，然後去找文件夾 E:\vue-devtools\shells\chrome，如下圖，完成之後，頁面右上角有一個灰色的vue的小圖標；

  （6）找到E:\vue-devtools\shells\chrome\webpack.config.js，加入一段代碼：

if (process.env.NODE_ENV === 'production') {
	module.exports.plugins = [
		new webpack.DefinePlugin({
			'process.env': {
				NODE_ENV: '"development"'
			}
		})
	]
}

 

 

 

 

 

• 在electrron-vue項目中田間vue-devtools插件

（1） 在項目目錄\ev-demo\src\main\下找到index.dev.js文件，添加2行代碼：

const { BrowserWindow } = require('electron')

BrowserWindow.addDevToolsExtension('D:\\softwares\\vue-devtools-dev\\packages\\shell-chrome')
// chrome文件夾所在的完整路徑地址

 啓動項目，出現上圖則說明，安裝正常