关于安装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.安装成功!
在这里插入图片描述

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐