解决vue-devtool执行npm run build报错问题

关于安装vue-devtool的小伙伴可以参考文章《electron+vue项目安装vue-devtools插件》，使用git获取源代码,如果能获取的话，切换到master分支则无需看下面的笔记了。如果无法使用git获取，只能下载zip的话，解决方法可以参考下面笔记

1.问题

Vue官方下载vue-devtool工具–此时最新版本为5.3.4，下载zip即可–并执行命令，遇见各式问题。

npm i
npm run build

2.解决

1）更新nodejs

建议小伙伴们安装一下nvm(nodejs的版本管理工具)，下载最新的LTS版(长期支持版)。若与遇安装失败问题，参考文档:nvm安装nodejs失败解决
修改registry

 npm config set registry http://registry.npm.taobao.org/

2）webpack安装失败问题

webpack官方文档有标明:"…使用 Node.js 最新的长期支持版本…"；
打开 /项目根目录/packages/shell-chrome/package.json，将红框中配置复制至 /项目根目录/package.json，复制完成后终端执行npm i

若遇到安装失败问题，可以参考小编的另一篇笔记：安装 webpack webpack-cli

3）其他(模板)问题

其他问题都是模板问题，报错有很多种情况，就不一一说明和截图了，直接说解决方法:
1.打开 /项目根目录/package.json,在“devDependencies”字段添加以下配置（别问为什么是这些，问 就是测出来的。。。），复制完成后终端执行npm i

"devDependencies": {
	...
    "@vue/compiler-sfc": "^3.0.8",
    "css-loader": "^4.3.0",
    "file-loader": "^6.1.0",
    "postcss-loader": "^3.0.0",
    "style-resources-loader": "^1.2.1",
    "stylus": "^0.54.7",
    "stylus-loader": "^3.0.1",
    "url-loader": "^4.1.0",
    "vue-loader": "^15.7.1",
    "vue-style-loader": "^4.1.0",
    "vue-template-compiler": "^2.6.10",
    "buble": "^0.19.0",
    "buble-loader": "^0.5.1"
}

2.打开 /项目根目录/packages/shell-chrome/package.json

发现此处有四个插件，使用npm命令却安装失败，因为远程并不存在；细心的小伙伴可以发现，这不就是packages里面的四个文件吗？！

在项目根目录/node_modules中新建文件夹，命名为:@vue-devtools，并将这四个文件拷贝复制至新的文件夹中

复制完成后，观察四个文件夹中的package.json文件。删除“dependencies”字段中是彼此的代码后，到各自目录下执行npm i,举例如图所示（其他文件做相同处理）：

3. 以上操作完成后，npm run build即可，得到结果：

3.完成chrome扩展

1.打开chrome浏览器，找到 更多工具->扩展程序

2.手动加载已解压的扩展程序，注意目录为 项目根目录/packages/shell-chrome


3.安装成功！