安装vue-devtools配置中的各种问题及解决

vue-devtools的安装

从github上克隆或者下载压缩包并解压
https://github.com/vuejs/vue-devtools

在devtools路径下进入命令提示符

输入npm install(npm i) 安装必要的一些依赖( 如果这一步报错的话，可以使用cnpm install)

npm install
cnpm install

再输入 npm run build

npm run build

注：如果不执行这一步可能会导致shells > chrome文件缺少build文件

成功如下图

5.打开Chrome浏览器 > 选择更多工具 > 扩展程序 > 打开开发者模式,点击加载已解压的扩展程序, 找到刚才生成的chrome文件夹，选择 vue-devtools > shells > chrome 放入


完成后有这个图标

配置中的各种问题及解决方法

1. 问题一：

如果安装到最后一步出现如图错误

可将shells > chrome文件夹下的mainifest.json 中的persistant修改为true

"background": {
	"scripts": [ "build/background.js" ],
	"persistent": true
}

如果依旧无法安装成功可能就是版本问题(建议安装5.1.1版本)
再根据上面的步骤下载解压

2. 问题二：

如果再一次npm install 或者 cnpm install 时报错，这时你可能需要先进行清除缓存

在命令行输入

npm cache clean --force

完成后再进行一次依赖配置

3. 问题三：

如果是npm run build 编译时报一下这种错误

这个错误主要在于版本安装问题，可以重新安装5.1.1版本

4. 问题四：

上面的方法已经解决了问题。不过要想面板出现，必须在vue的生产环境下使用
还需要在webpack.config.js中进行配置：

if (process.env.NODE_ENV == 'production') {
	module.exports.devtool = '#source-map'
	module.exports.plugins = (module.exports.plugins || []).concat([
		new webpack.DefinePlugin({
			'process.env': {
				NODE_ENV: JSON.stringify('production')
			}
		}),
		new webpack.optimize.UglifyJsPlugin({
			sourceMap: true,
			compress: {
				warnings false
			}
		}),
		new webpack.LoaderOptionsPlugin({
			minimize: true
		})
	])
}

	

5. 问题五：

关于成功安装了Vue-devtools插件但在浏览器控制台不显示的问题

没显示调试工具的原因是用了生产环境的版本或是压缩的vue版本或是没有勾选，如BIlibili属于压缩vue版本

可以尝试运用自己本地的vue项目

官方建议在项目入口文件（main.js）引入：

Vue.config.devtools = true;

如果本文对你有帮助的话，请不要忘记给我点赞留言哟！！!
有问题请留言哟!