概述
在firefox可以通过，浏览器-打开菜单-附加组件 从插件中安装vue-tools
dev-tools
但是在 chrome内是无法安装的，因为政策原因无法访问，因此如果想用chrome的浏览器，来调试vue项目就很不方便了
但是通过git工具我们可以手动安装
流程
- 通过github下载vue-devtools ，可以download zip包
- 解压至指定文件目录，运行npm install 安装依赖
- 通过npm run build 打包
如果成功的话则进行后续 配置浏览器插件
如果不成功 可以看看 报错流程
配置浏览器插件
- 打开shells/chrome/manifest.json中的"persistent": false。将值改为true
- 打开谷歌浏览器，输入 chrome://extensions/ ，选择开发者模式，点击加载已解压的扩展程序，选择shells/chrome文件夹
-
将vue-tools固定至浏览器顶部工具栏
固定工具至菜单栏
报错流程
参考的原贴位置
[ 报错一 ]：'webpack' 不是内部或外部命令,也不是可运行的程序 或批处理文，且已经安装过nodejs
问题原因：很有可能没有全局安装webpack
解决流程：
- 确保nodeJS已安装的情况下，打开nodejs文件夹 查看有没有
node_cache、node_global两个文件夹 - 如果没有这2个文件夹，则手动创建这两个文件夹
- 修改npm全局配置
npm config set prefix "你的nodejs文件夹路径\node_global"
npm config set cache "你的nodejs文件夹路径\node_cache"
- 修改系统环境变量
桌面--> 我的电脑 --> 右击 属性 --> 高级系统设置 --> 环境变量
环境变量下分为 用户变量 与 系统变量
4-1. 修改 系统变量:
新建一个名称为NODE_PATH的系统变量, 路径为"你的nodejs文件夹路径\node_global\node_modules"
4-2. 修改 系统变量:
对path选择后，点击编辑，新建一个"你的nodejs文件夹路径\node_global"
4-2. 修改 用户变量:
点击Path，选择编辑，新增 "你的nodejs文件夹路径\node_global\node_modules" - 全局安装webpack，如果安装结束后，无法使用
webpack -v查看安装版本信息，则安装cli工具
npm install webpack -g
npm install webpack-cli -g
- 运行
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的安装依赖中，各种包的版本不兼容
解决方法：
- 下载比较旧的版本，vue-tools v5.1.1下载地址
- 解压后，
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 -- 成功版本
网友评论