2. 项目开发模式运行出现 Failed to fetch extension 警告 由于网络问题, 开发模式无法下载 vue devtool 导致的警告, 需要在 background.js 中注释掉下载代码 image.png 3. 项目使用本地的vue devtools ① 首先可以将vue devtools的代码clone下来, 然后进行编译 代码语言:javascript 代码运行次数:0 运行 AI代码解释...
npm run build 步骤二:引入electron-vue项目中 打包完成后复制/shells/chrome整个文件夹,粘贴到你的electron-vue项目根目录,可以改个文件夹名字,比如我改成了 “.devtools”。如果不想上传这个文件夹的内容到远程仓库,则在项目里的.gitignore中添加.devtools即可 .devtools文件夹里的内容如下图所示: 步骤三:在代码...
所以建议大家采用这种方式,另外这里看到的ID信息后面有用 获取Vue.js devtools在电脑中的安装位置 按上述建议方式安装的插件位置是在Chrome安装位置里面的,下图是我的路径 使用BrowserWindow.addDevToolsExtension(extension)API 这是electron官网对BrowserWindow.addDevToolsExtension(extension)API的使用介绍,简单来说就是在elec...
之后会出现这个画面,这个主要是因为vue-devtools插件需要从外网下载,如果需要的话可以科学上网一下,如果你平时开发vue就用不到vue-devtools,那直接忽略就好了,稍等数秒,就可以看到我们的项目启动成功了。 适配主题 上面看到的是vue预置的启动画面,我们先把无用的东西都给删了,就留下一个helo world。 可以看到,画面...
有了vue-devtools不要太方便,接下来,就看看怎么安装。 我们先要用yarn安装 electron-devtools-installe 再安装 vue-devtoolstip:要注意这2个都是开发环境下使用的,生产环境不需要,所有要在安装的时候加“ -D ” 安装完成后我们就可以在主线程入口文件中添加如下代码:BrowserWindow.addDevToolsExtension('node_modules/...
"@vitejs/plugin-vue": "^5.0.4", "electron": "^30.0.0", "electron-builder": "^24.13.3", "electron-devtools-installer": "^3.2.0", "typescript": "^5.2.2", "vite": "^5.2.0", "vite-plugin-electron": "^0.28.4", "vue-tsc": "^2.0.6" ...
, source: chrome-extension://vue-js-devtools/build/devtools.js (22) 想必空白的原因就是这个报错引起的。 但我有一台电脑的Electron devtools是可用的,此扩展程序从chrome网上应用店下载,版本为:5.1.1。 同时有另一台电脑,扩展程序也是从chrome应用商店下载,版本为:5.3.4。这个版本也报错,报错和自己编译的...
① 首先可以将vue devtools的代码clone下来, 然后进行编译 git clone https:///vuejs/vue-devtools.gitcd vue-devtools npm install npm run build复制代码 1. 2. 3. 然后把vue-devtools/packages/shell-chrome文件夹复制到项目根目录 ②在background.js文件的app.on('ready',生命周期中进行加载 ...
console.error('Vue Devtools failed to install:', e.toString()) } } createWindow() }) 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 加入vue-devTools 成功.。 就这样就可以调试了,具体配置看官网Demo
vue init simulatedgreg/electron-vue 然后根据下面的提示一步步选中选项即可创建项目,如下所示。 然后,使用npm install命令安装项目所需要的依赖包,安装完成之后,可以使用npm run dev或npm run build命令运行electron-vue模版应用程序,运行效果如下图所示。