解决vue-devtool执行npm run build报错问题
1.问题Vue官方下载vue-devtool工具–此时最新版本为5.3.4,下载zip即可–并执行命令,遇见各式问题。npm inpm run build2.解决1)更新nodejs建议小伙伴们安装一下nvm(nodejs的版本管理工具),下载最新的LTS版(长期支持版)。若与遇安装失败问题,参考文档:nvm安装nodejs失败解决修改registrynpm config set registry
关于安装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.安装成功!
更多推荐
所有评论(0)