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文件夹所在的完整路径地址

 启动项目，出现上图则说明，安装正常