安装个chrome vue-tools一波三折

概述

在firefox可以通过，浏览器-打开菜单-附加组件 从插件中安装vue-tools

dev-tools

但是在 chrome内是无法安装的，因为政策原因无法访问，因此如果想用chrome的浏览器，来调试vue项目就很不方便了

但是通过git工具我们可以手动安装

流程

1. 通过github下载vue-devtools ，可以download zip包
2. 解压至指定文件目录，运行npm install 安装依赖
3. 通过npm run build 打包

如果成功的话则进行后续 配置浏览器插件
如果不成功 可以看看 报错流程

配置浏览器插件

1. 打开shells/chrome/manifest.json中的"persistent": false。将值改为true
2. 打开谷歌浏览器，输入 chrome://extensions/ ，选择开发者模式，点击加载已解压的扩展程序，选择shells/chrome文件夹

3. 将vue-tools固定至浏览器顶部工具栏

   
   
   固定工具至菜单栏

报错流程

参考的原贴位置
[ 报错一 ]：'webpack' 不是内部或外部命令,也不是可运行的程序 或批处理文，且已经安装过nodejs
问题原因：很有可能没有全局安装webpack

解决流程：

1. 确保nodeJS已安装的情况下，打开nodejs文件夹 查看有没有node_cache、node_global两个文件夹
2. 如果没有这2个文件夹，则手动创建这两个文件夹
3. 修改npm全局配置

npm config set prefix "你的nodejs文件夹路径\node_global"
npm config set cache "你的nodejs文件夹路径\node_cache" 

4. 修改系统环境变量
   桌面--> 我的电脑 --> 右击 属性 --> 高级系统设置 --> 环境变量
   环境变量下分为 用户变量 与 系统变量
   4-1. 修改 系统变量:
   新建一个名称为NODE_PATH的系统变量, 路径为"你的nodejs文件夹路径\node_global\node_modules"
   4-2. 修改 系统变量:
   对path选择后，点击编辑，新建一个"你的nodejs文件夹路径\node_global"
   4-2. 修改 用户变量:
   点击Path，选择编辑，新增 "你的nodejs文件夹路径\node_global\node_modules"
5. 全局安装webpack，如果安装结束后，无法使用webpack -v查看安装版本信息，则安装cli工具

npm install webpack -g
npm install webpack-cli -g

6. 运行webpack -v查看当前版本，如果还提示不是内部命令，则需要关闭命令行窗口，重新打开再次输入webpack -v即可

[ 报错二 ]：
参考的原贴位置
在不存在webpack未全局安装的问题下，打开vue-tools文件夹去运行npm install之后，执行 npm run build的命令依旧报错~
出现：
This is probably not a problem with npm,There is likely additional logging output above
问题原因：
安装的webpack版本与vue-tools的安装依赖中，各种包的版本不兼容

解决方法：

1. 下载比较旧的版本，vue-tools v5.1.1下载地址
2. 解压后，npm install 安装依赖，打包npm run build，成功了~~！！！

继续上述 配置浏览器插件的后续流程，完成浏览器的最终配置。

参数参考

本机系统信息：
nodejs v10.16.0
webpack 5.11.0
webpack-cli 4.3.0

vue-tools信息
v5.3.3 -- 安装报错的版本
v5.1.1 -- 成功版本