vue-devtools安装笔记，安装编译及报错解决 2023-3-6

金山办公 - johyeon

已于 2023-07-05 20:13:39 修改

阅读量1.3k

点赞数 2

文章标签： vue.js javascript 前端 vue

于 2023-03-06 21:26:43 首次发布

本文链接：https://blog.csdn.net/ohoneybaby/article/details/129368472

版权

2023-3-6 vue-devtools安装笔记

安装与编译vue-devtools笔记，增加了没有搜到的报错，总结如下：

一、参考文章

https://bbs.csdn.net/topics/606198861

二、安装步骤

1. 下载 vue-devtools (manifest-v2)

git clone https://github.com/vuejs/devtools.git
这一步我用的是cnpm的镜像

2. 安装

npm install -g yarn

yarn install

这里安装会报错

Exit code: 1
Command: node install.js
Arguments:
Output:
RequestError: read ECONNRESET
at ClientRequest.<anonymous>

按照如下步骤修改

进入 node_modules/electron文件下，编辑install.js

修改downloadArtifact这段代码，添加淘宝镜像地址https://npm.taobao.org/mirrors/electron

   {.....
        mirrorOptions: {
            mirror: 'https://npm.taobao.org/mirrors/electron/',  
            platform,
            arch,
        }
    }

执行 npm install rimraf --save-dev --force

如果报以下错，原因是404未找到，获取不到zip，无报错则忽略

    npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c C:\Users\johyeon\AppData\Local\Temp\postinstall-5717e0c1.cmd        
    npm ERR! HTTPError: Response code 404 (Not Found) for https://npm.taobao.org/mirrors/electronv21.0.1/electron-v21.0.1-win32-x64.zip

解决：修改mirror为 https://npm.taobao.org/mirrors/electron/v21.0.1

    //淘宝正确的路径，这里的版本号根据上一步的报错值修改，electronv21.0.1就改为/electron/v21.0.1 
    {.....
        mirrorOptions: {
            mirror: 'https://npm.taobao.org/mirrors/electron/v21.0.1',  
            platform,
            arch,
        }
    }

再次执行 npm install rimraf --save-dev --force，安装成功

3. 修改配置

修改 devtools/packages/shells-chrome/manifest.json -> background的persistent为true，没有就添加上去。
修改 devtools/packages/shell-chrome -> packages.json,将里面的 rm -rf 替换为 rimraf。
修改 devtools/packages/shell-electron -> packages.json,将里面的 rm -rf 替换为 rimraf。