vue-devtools 编译安装(yarn install卡住解决方案)

    技术2022-07-11  116

    vue-devtools 编译安装

    先从Github 拉源码

    git clone https://github.com/vuejs/vue-devtools.git

    编译 vue-devtools

    1. 安装yarn

    npm install yarn -g

    将yarn添加淘宝源#设置永久镜像

    yarn config set registry https://registry.npm.taobao.org

    2. 安装项目的全部依赖

    切换到vue-devtools目录下

    yarn install

    此时yarn install 卡在安装Electron上

    [5/5] Building fresh packages... [-/4] ⠄ waiting... [-/4] ⠄ waiting... [4/4] ⠄ electron

    按照此作者方法, 打开C盘下的用户目录,找到~/.yarnrc文件,将lastUpdateCheck 删掉:

    registry "https://registry.npm.taobao.org" electron_mirror "https://npm.taobao.org/mirrors/electron/" lastUpdateCheck 1549116918628 # 删掉 删掉

    yarn install 成功了!

    3. 打包 vue-devtools 插件

    yarn run build

    我们打包好的内容在目录 E:\vue-devtools\packages\shell-chrome 此时,已经可以直接安装。 crx其实只是个动了手脚的zip

    4. 安装 chrome 扩展(加载已解压的扩展程序)

    我们打包好的内容在目录vue-devtools\packages\shell-chrome 此时,已经可以直接安装。 在谷歌浏览器->更多工具->拓展程序->打开开发者模式,点击加载已解压的拓展程序,选择vue-devtools\packages\shell-chrome ,加载成功后如下图所示。

    Processed: 0.025, SQL: 9