electron-vue解决打包错误、无法调用出开发者工具（亲测有效）

最新推荐文章于 2024-07-31 17:34:40 发布
最新推荐文章于 2024-07-31 17:34:40 发布
阅读量2.6k 收藏 2
点赞数 1
分类专栏： electron 文章标签： node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhouzuoluo/article/details/112964751
版权

错误1： unresolved node modules vue... 或 not found modules..的错误

解决方式：依赖的模块错误，删除node_module文件夹后，尽量用npm install而不是淘宝镜像cnpm安装

 

错误2： Cannot create symlinks (on Windows hosts, it requires admin privileges); skipping mas platform

解决方式：在项目根目录下以管理权限运行命令行窗口cmd后，输入打包编译语句npm run build即可解决管理员权限问题。此外注意的是及时执行npm run build后，windows系统也不能打包mas或darwin平台应用。

 

错误3：npm run build进行打时 take it away "electron-builder"后错误

解决方式：检查具体错误原因，如下图错误可以通过删除重复的进程解决

其他错误可以通过修改package.json配置文件中buildelectron-builder的版本信息解决

 

打包成功后:

       

 

 

问题4：启动项目exe文件后，发现无法调用出开发者工具

解决方式：a、在electron-vue主进程中添加以下语句

mainWindow.webContents.openDevTools();
// 或者mainWindow.openDevTools();

  

 

b、将package.json 中的devDependencies（开发环境使用）这几句添加到dependencies（生产环境使用），重新打包编译后即可调用开发者工具。

"electron-debug": "^1.5.0",
"electron-devtools-installer": "^2.2.4"

 

 

 

 

 

 

广积粮缓称王
关注
专栏目录
Electron 打开开发者工具 devtools
12-14 1485
平时，我们利用chrome要调试网页的时候，按F12（mac下面是shift+花+i）打开的开发者工具，就是这个devtools，或者可以称之为“开发者模式”默认状态下，开发者工具的位置是上一次工具打开的位置（左边，右边，下边都有可能。取决于上一次的状态，但不会是分离状态，也没有处于顶部的状态）。在electron开发的过程中，可以用代码控制打开自带chrome的devtools开发者工具，进而调试渲染教程页面。Electron 打开开发者工具 devtools。分离状态打开devtools。
electron-devtools-installer:确保Chrome DevTools扩展到Electron的简便方法
04-29
Electron DevTools安装程序 这是将DevTool扩展安装到Electron中的简便方法。 您不必费心去下载扩展程序，找到正确的文件夹，然后为每个人的计算机配置路径。 安装 npm install electron-devtools-installer --save-dev 或者 yarn add electron-devtools-installer -D 用法 现在您要做的就是在应用程序的主要过程中进行此操作。 import installExtension , { REDUX_DEVTOOLS } from 'electron-devtools-installer' ; // Or if you can not use ES6 imports /** const { default: installExtension, REACT_DEVELOPER_TOOLS }
electron-vue打包遇到的问题总结
最新发布
qugeshenmominzi的博客
07-31 1177
解决办法：直接在淘宝的文件库下载对应版本和打包平台的文件，下载完成后放在C:\Users\Administrator\AppData\Local\electron\Cache这个目录下下载地址：electron的淘宝镜像地址 https://npm.taobao.org/mirrors/electron/
electron怎么打开开发者工具
Alive_tree的博客
09-09 3412
我们都知道electron中集成了Chromium，内部有一个最新版的谷歌浏览器，开发者无需再去考虑浏览器的兼容性，这样我们就可以用最新的语法，es6，es7、flex布局等，但是我们想要打开开发者工具调试的时候，按F12却没反应。 打开开发者工具很简单，只需要 win.webContents.openDevTools() 代码如下 if (process.env.WEBPACK_DEV_SERVER_URL) { if (!process.env.IS_TEST) win.webContents.
electron 打包之后，如何使用 F12 开启开发者工具？
热门推荐
布里渊区
02-25 1万+
基本代码部分参见下面这篇文章 https://newsn.net/say/electron-devtools-plus.html 但是，还需要在打包的配置依赖中加上几项内容；在package.json文件中： 默认只有dev里面有下面两项依赖 现在，要把这两项也添加到dependencies里面 ...
electron-vue 打包错误
Flying的博客
09-01 2350
electron-vue 打包错误 列举可能出现的问题，与解决方法 问题一：同时使用了npm与cnpm安装依赖 解决方法:删除项目中的node_modules文件夹，重新使用 npm或cnpm安装依赖。 重新安装完成后 重新打包即可。 问题二: 使用npm或cnpm安装依赖时，打包依旧错误。 解决方法:别用淘宝镜像，直接使用国外源进行安装，可以将电脑连接手机打开热点，或翻墙速度快些。 重...
electron-vue 打包失败可能的原因
zj20165149的博客
02-25 473
程序路径不能为中文
Electron项目中通过electron-vue + electron-builder + electron-updater实现远程更新（包含源码）
04-01
本项目利用`electron-vue`、`electron-builder`和`electron-updater`这三款强大的工具，实现了一个完整的远程更新流程，包括检查更新、下载更新以及自动安装更新。以下将详细介绍这三个组件的功能和实现方式。 **1....
Electron-vue开发的客户端支付收款工具的实现
10-16
本文将详细讲解如何使用Electron-vue框架开发一个...开发者需要对Vue.js、Node.js、数据库操作和支付宝支付API有深入的理解，才能成功地开发出这样一个工具。同时，安全性和用户体验也是此类应用需要着重考虑的因素。
Electron-vue脚手架改造vue项目的方法
10-17
尽管Electron-vue是为了方便Vue项目构建桌面应用而设计的，但事实上，任何项目都可以通过Electron打包成桌面应用，关键在于理解如何适配Electron的环境，而不局限于使用Electron-vue。 总之，Electron-vue提供了一...
Electron-vue基本介绍及demo代码
日常笔记/总结/系列知识梳理
12-22 499
Electron-vue 是一个基于 Electron 和 Vue.js 的框架，用于开发桌面应用程序。它结合了 Electron 的跨平台能力和 Vue.js 的灵活性和易用性，使开发人员可以使用常见的前端技术来构建功能丰富的桌面应用程序。使用 Electron-vue，开发人员可以利用 Vue.js 的开发模式和组件化架构来构建桌面应用程序。它提供了一些预设的配置和工具，使开发人员可以更快地启动项目，并轻松地集成 Electron 和 Vue.js。你可以根据自己的需求进一步开发和定制化。
electron-vue的webview详解及案例代码
日常笔记/总结/系列知识梳理
12-22 1058
使用WebView组件，您可以将网页内容嵌入到Electron应用程序中，并使用Vue组件来控制和管理WebView的内容。Electron-Vue中的WebView组件是一种用于在Electron应用程序中嵌入网页的组件。WebView组件允许您在Electron应用程序中呈现网页内容，并且可以与Vue组件进行交互。安装WebView组件：首先，您需要在项目中安装WebView组件。您可以使用npm或yarn来安装它。导入WebView组件：在您的Vue组件中，您需要导入WebView组件。
electron-vue官方模板打包失败问题合集
latinhui的博客
06-07 3571
1.背景 最近使用electron-vue进行项目开发，到打包的时候发现打包失败，各种问题，于是就尝试直接使用官方模板进行打包，发现也是不行，各种问题在后文列举。这里记录一下最后我可用的方案，同时将常见问题罗列以备小伙伴们少走弯路。 当前环境： node:14.12 electron:2.0.18 electron-vue获取： vue init simulatedgreg/electron-vue newPro 2.当前顺利打包流程 记录一下我目前可用的方案。 2.1 关于multispinner的bu
electron-vue项目构建打包错误失败问题合集
qq_43548590的博客
08-31 4661
使用electron-vue官方模板 1.安装步骤 根据官网步骤执行 # 安装 vue-cli 和 脚手架样板代码 npm install -g vue-cli # my-project 为项目名 vue init simulatedgreg/electron-vue my-project # 安装依赖并运行你的程序 cd my-project yarn # 或者 npm install yarn run dev # 或者 npm run dev 2.打包bug处理 2.1. 关于task的bug
electron builder打包时，出现errorOut=ERROR: Cannot create symbolic link
vifaceeeeee的博客
11-29 5706
electron builder打包时，出现errorOut=ERROR: Cannot create symbolic link的解决办法
electron 打开 webview 的 devtools openDevTools
joy1793的博客
04-15 1398
项目场景： electron项目的webview需要注入preload js，但是我发现注入的preload js似乎没有正常执行。随即想打开webview网页的devtools看看。代码如下 问题描述： index.html <webview id="link-view" src="https://v.qq.com/x/page/m3206njx773.html" allowpopups preload="js/inject.js" nodeintegration disablewe
electron如何打开调试工具
kerryqpw的博客
12-10 6277
electron如何打开调试工具 JS代码的调试 由于Chromium的多进程结构，所以JS代码运行在两种不同的进程环境下，对应的调试方式也分为两种 渲染进程下的JS代码调试 这个相对简单，我们用代码打开Chromium的开发者工具即可愉快的调试了，代码如下： let win = new BrowserWindow() win.webContents.openDevTools...
electron项目中引入devtools
skysys的研究小屋
07-05 1355
官方文档说明：https://www.electronjs.org/docs/tutorial/devtools-extension electron-devtools-installer 插件 https://github.com/MarshallOfSound/electron-devtools-installer vuejs devtool 插件 https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnna
electron-builder打包vue
07-22
你可以使用electron-builder来打包Vue应用程序。下面是一些步骤： 1. 首先，确保你已经在Vue项目中安装了electron和electron-builder。如果还没有安装，可以使用以下命令进行安装： ``` npm install electron electron-builder --save-dev ``2. 在Vue项目的根目录中创建一个`build`目录，并在其中创建一个`electron.js`文件。这将是Electron的主进程文件。 3. 在`electron.js`文件中，添加以下代码： ```javascript const { app, BrowserWindow } = require('electron'); function createWindow() { // 创建浏览器窗口 const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }); // 加载Vue应用的index.html文件 win.loadURL('http://localhost:8080'); // 打开开发者工具 win.webContents.openDevTools(); } // 当Electron完成初始化并准备创建浏览器窗口时调用此方法 app.whenReady().then(createWindow); // 在所有窗口关闭时退出应用 app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); } }); app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow(); } }); ``` 4. 在Vue项目的`package.json`文件中添加以下脚本： ```json "scripts": { "electron:serve": "vue-cli-service serve", "electron:build": "vue-cli-service build && electron-builder" } ``` 5. 现在，你可以使用以下命令来启动Electron开发服务器： ``` npm run electron:serve ``` 6. 当你准备好打包应用程序时，使用以下命令： ``` npm run electron:build ``` 这将在你的项目根目录下创建一个`dist_electron`文件夹，其中包含已打包的Electron应用程序。 请注意，上述代码只是一个基本示例，你可以根据你的需求进行修改和扩展。另外，请确保在使用`electron-builder`之前，你的Vue应用程序已经成功构建。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值