Electron 是一个用于构建跨平台桌面应用的框架，基于 Chromium 和 Node.js，允许使用 Web 技术（如 HTML、CSS 和 JavaScript）构建桌面应用。...3、大致结构： 打包后的内容在 unpackage/dist/build/web/ 下，初始结构包括 index.html，assets 目录以及 static 目录，需要创建你 main.js 以及...打包大小优化：Electron 打包的文件可能较大，可以使用压缩工具（如 electron-builder）进一步优化。...默认情况下，Electron 会将应用的代码和资源存储为文件夹格式，使用 --asar 选项可以将其压缩为单个 ASAR 文件。...electron-builder 打包应用后，会将应用输出到 release-build 文件夹中。你可以根据需要更改输出目录。 最终打包的成品长这样
elecrton.asar electron 的 JS 部分代码。如提供 remote、ipcMain、ipcRenderer 等模块。 electron.exe 我们应用的主程序。...但打包后会发现 node_modules 文件夹还是会被打包进最终的应用中。 实际上 electron-builder 保留 node_modules 是有原因的。...在原本的项目下新建一个需要打包的文件夹 app。 如果项目下有 app 文件夹，electron-builder 在打包时会以改文件夹为打包的根文件夹，即只会打包改文件夹下的文件。...如设置 "build": { "files": [ "dist" ] } 则只会打包 app/dist 这个文件夹下的内容。...app 文件夹下创建 package.json 文件 由于只会打包 app 下的文件，因此我们也需要在 app 文件夹下创建 package.json 文件，在该文件中配置我们应用的名称、版本、主进程入口文件等信息
打包项目 Electron的打包工具有很多，例如 electron-builder、electron-packager 或 electron-forge。...这些工具可以帮助我们将 Electron 应用程序打包为可执行文件，并根据目标平台生成相应的安装程序或应用程序包。...electron-builder：是一个功能强大的打包工具，支持跨平台打包，并提供多种目标平台和格式的选项，如 Windows、Mac、Linux、NSIS、AppImage 等。...electron-packager：是另一个常用的打包工具，支持将 Electron 应用程序打包为各个平台的可执行文件，如 Windows、Mac 和 Linux 等。...make 命令来创建可分发的应用程序： npm run make Electron-forge 会创建 out 文件夹，您的软件包将在那里找到： // Example for macOS out/ ├─
Electron的应用场景Electron广泛应用于需要跨平台支持的桌面应用开发，如企业内部工具、数据可视化工具、代码编辑器、媒体播放器等。...它广泛应用于需要创建Windows安装程序的场景，无论是软件发布、数据库打包还是其他需要自定义安装流程的场景。...DMG (Disk Image)定义和用途：DMG是macOS系统中用于分发软件的一种格式，通常以.dmg文件扩展名出现，用于创建可启动的磁盘镜像，方便用户安装和运行应用程序。...特点：提供用户友好的安装界面，直接将应用程序拖拽到“应用程序”文件夹中即可完成安装，适用于Mac平台。DMG文件通常包含应用程序的可执行文件、必要的资源文件和启动器，使得用户可以轻松运行和卸载软件。...AppImage定义和用途：AppImage是一种用于Linux操作系统的应用程序打包格式，它允许开发者创建一个独立的、自包含的应用程序文件，用户下载后即可运行，无需安装过程。
deskApp(名字随意) 4.将vue打包后的dist文件夹拷贝到deskApp 5.在dist文件夹里面新建main.js和package.json文件 main.js const {app, BrowserWindow...width: 800, height: 600 }; function createWindow() { win = new BrowserWindow(windowConfig);//创建一个窗口...win.loadURL(`file://${__dirname}/index.html`);//在窗口内要展示的内容index.html 就是打包生成的index.html win.webContents.openDevTools...--dir", "dist": "electron-builder", "postinstall": "electron-builder install-app-deps...目录结构 生成的桌面应用
前言 前段时间有给大家分享一个Electron跨端仿QQ聊天，今天带来最新研发的Electron短视频|直播应用。 未标题-p2.png 支持上下拖拽滑动切换视频、键盘上下键切换视频等功能。...vue-cli-plugin-electron-builde UI组件库：vant3 (有赞vue3移动端组件库) 弹框组件：v3popup (vue3移动端弹窗组件) 轮播图组件：swiper^6.5 p1.gif 项目结构 采用vite.js和electron-builder.../module/actions' import '@/assets/js/fontSize' // 引入公用样式 import '@/assets/fonts/iconfont.css' import...'@/assets/css/reset.css' import '@/assets/css/layout.css' loadWin().then(args => { winCfg.window...// }, "asar": false, //asar打包 // 拷贝静态资源目录到指定位置（如根目录下的static文件夹会拷贝至打包后的dist_electron/win-unpacked
/actions'launchApp().then(config => { if(config) { // 全局存储窗口配置 window.config = config } // 创建...app应用实例 createApp(App) .use(ElementPlus) .use(Router) .use(Pinia) .mount('#app')})Electron主进程配置新建一个...electron文件夹，用于配置主进程及预加载文件。...': resolve(__dirname, 'src/assets'), '@components': resolve(__dirname, 'src/components'),...div> Electron31+vue3自定义系统导航栏创建窗口的时候配置
中的静态页面建议放在public文件夹中 打包配置 我们使用的vue-cli-plugin-electron-builder内部也是用electron-builder打包的，但是配置的位置不能像之前那样配置了...LICENSE.txt文件的编码必须为GBK编码 页面加载方式 之前直接用Electron写的代码，后来要结合Vue Cli3创建的项目，本来想的是直接把Electron的代码放在Vue的public目录中...首先我们要知道程序的打包步骤 webpack打包 => electron-builder打包（asar打包 => exe打包） 考虑到不同平台需要打入的ffmpeg不同，我们可以在webpack打包过程中筛选使用的文件...，过程如下： 如果软件不考虑多平台，那么可以直接下载对应平台的ffmpeg放在项目根目录下的core文件夹中，下面的第一步可以跳过不用配置。..."./" : "/", outputDir: "webapp", assetsDir: "assets", filenameHashing: false, lintOnSave: true
这篇文章主要介绍如何打包 Electron 应用，以及分析 electron-builder 是如何对我们的应用进行打包的。...On OS X, it is installable via Homebrew. electron-builder 打包分析 文件大小分析 因为要达到跨平台的目的，每个 Electron 应用都包含了整个...打包后的项目结构 我们看下打包后的项目结构 (electron-builder --dir) 加上 --dir 参数，不将整个应用打包成安装文件，来查看一个应用的目录结构： .├── locales│ ...不同的应用程序只需要重新打包好相应的 app.asar 即可。...最后对这个可执行程序的图标等信息进行修改就可以得到我们的应用程序了~ 打包可能存在的问题 electron-builder 打包虽然帮我们把一些文件过滤掉不进行打包，但是我们的项目源码是没有经过任何处理的被打包了进去
Electron 的 BrowserWindow 类负责创建和控制浏览器窗口，app 对象则可以控制应用程序的各个事件与生命周期。...使用 electron-builder 打包 Electron 应用时，如果不加处理，会将 node_modules 内的内容全数打包，导致应用体积偏大。...具体来说，electron-builder 推荐用户将 Electron 应用依赖划分为两部分：开发依赖以及生产依赖。...用户使用项目根目录的 package.json 来管理开发依赖，而使用项目的应用文件夹下的 package.json 管理生产依赖。electron-builder 仅会打包应用文件夹下的依赖。...在这个改动后，安装依赖时还需要通过 electron-builder install-app-deps 命令安装应用依赖。
Electron可以让程序员重用Web的代码，使用HTML、CSS、JavaScript来构建桌面应用，并在不同平台上使用。...Electron官网上说：“比你想象的更简单”————“如果你可以建一个网站，你就可以建一个桌面应用程序。...Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架，它负责比较难搞的部分，你只需把精力放在你的应用的核心上即可。”...与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。目前 Vue 已经成为继 Rect 之后最流行的前端开发框架。...打开后就是正常的软件界面 我们创建好了项目结构，那么在使用 Vue 开发 Electron 桌面应用的时候还有一个比较重要的知识点要了解，就是消息通信。
这篇文章主要介绍如何打包 Electron 应用，以及分析 electron-builder 是如何对我们的应用进行打包的。...electron-builder 打包分析 文件大小分析 因为要达到跨平台的目的，每个 Electron 应用都包含了整个 V8 引擎和 Chromium 内核，以致于一个空的 Electron 项目，...使用 electron-builder --dir 打包后没有压缩的项目文件夹，大小也已经到了 121.1 MB。...打包后的项目结构 我们看下打包后的项目结构 (electron-builder --dir) 加上 --dir 参数，不将整个应用打包成安装文件，来查看一个应用的目录结构： . ├── locales...最后对这个可执行程序的图标等信息进行修改就可以得到我们的应用程序了~ 打包可能存在的问题 electron-builder 打包虽然帮我们把一些文件过滤掉不进行打包，但是我们的项目源码是没有经过任何处理的被打包了进去
：它是一个 Node.js 包，它可以用于等待多个指定的资源（如 HTTP 资源、TCP 端口或文件）变得可用。...有如下输出则应该为安装成功：5、第2步：项目目录增加 Electron 文件在项目增加 Electron 文件时我们需要扩展一部分知识从而了解为什么创建创建这个目录，并在该目录下增加main.js文件的作用...主进程是 Electron 应用程序的核心，它运行在一个 Node.js 实例中，并管理应用程序的生命周期、窗口创建和销毁、与底层操作系统进行交互等。.../src/assets", "to": "....打包成功之后可以看到有一个 output 文件夹的生成，打开之后可以选择双击打开软件验证看下是否可以正常开启应用。
经过一番调研，最终选择了如下的技术栈来开发这个桌面客户端： Electron：跨平台桌面应用开发框架 Vue：JavaScript 框架 ElementUI：Vue 的 UI 框架 Electron-store.../mrdoc-desktop） 通过安装 electron-builder 将 Electron 集成到项目中： vue add electron-builder 在安装完 electron-builder...依赖和选择 Electron 的版本后，我们的项目就创建完成了。...项目结构 因为使用了 electron-builder，所以在项目创建完成之后，就已经存在一个最基础的 Electron 应用了。...main.js 是 Vue 的入口文件； App.vue 是 Vue 的根组件； /router 文件夹存放的是我们定义的路由文件； /pages 文件夹存放的是我们的页面组件； 项目运行 在命令行终端界面
[electron-builder打包.001] 前言 Electron 之所以能够日益风靡，是因为其简单易用且对各个操作平台具有良好的支持。...appId": "xxxxx", "copyright":"xxxx",//版权信息 "directories": { "output": "build" // 输出文件夹...": true, // 创建开始菜单图标 "shortcutName": "xxxx" // 图标名称 } } } 配置打包脚本 在 package.json 中，添加对应的打包脚本...electron-builder 在打包的时候，会根据系统的不同去各自的 NPM 缓存目录下查找对应版本的 Electron 源，当我们将下载好的源放在 NPM 缓存中后，就不需要再去联网拉去了。...总结 以上就是在不联网的情况下使用 electron-builder 打包全平台桌面应用的记录。 ~ ~ 本文完，感谢阅读！ ~ 学习有趣的知识，结识有趣的朋友，塑造有趣的灵魂！
前言由于我是使用@quick-start/electron创建的vue-electron项目，默认是使用electron-builder来构建应用的，但是网上的教程一般都是electron-forage...原理首先，想在docker中使用electron-builder打包成exe的话，前提就是需要wine环境，这里就不得不表扬一下electron-builder了，直接提供了一个带有wine环境的镜像，...Dockerfile就是这样婶的# 基于electron-builder提供的镜像FROM electronuserland/builder:wine# 默认用户USER root# 默认工作目录ENV...apt-get upgrade -y && apt-get install -y curl wget libatk1.0-dev libatk-bridge2.0-dev libgtk-3-dev# 创建工作目录.../build.sh"]大概原理不用多说，只是基于他原本的镜像去额外装了几个包，然后利用build.sh去自动构建应用，构建脚本的内容就可以自由发挥了，我是这么写的#!
写在前面 人真的是会变得越来越懒的，也正是人的惰性吧，真的是很讽刺。 关于这个应用程序的开发，断更了很久，但是代码部分还算没落下吧，终于在周一、周二终把这个应用程序写完了。 开发完不是终点。..."appId": "com.leon.xxxxx",//包名 "copyright":"xxxx",//版权 信息 "directories": { // 输出文件夹...除了这几点之外，由electron-builder打出的包更为轻量，并且可以打包出不暴露源码的setup安装程序。考虑到以上几点，我果断选择了electron-builder。...整体感受 万事开头难，在开发环境的搭建及应用程序的打包方面花费的时间是最多，目前网上的博主真的好多，但是靠谱的真的很少，大部分都是复制别人的，真的很坑。...目前自己可以创建一个简单的electron应用，并且可以使用electron在主进程、渲染进程间实现通信，算是入门了吧，确实挺好玩的，以后有时间可以再渗入研究下。
恶意代码被Bitwise XOR加密并存储在assets文件夹中，只有在被特定的应用程序子类调用时才能被解压。...FakeCop 还会主动扫描设备应用程序列表，如果发现如Anshin Security、McAfee Security 和 Docomo Anshin Scan在内的防病毒程序，会要求用户将其删除。...△ FakeCop 请求的大量权限，来源：Cyble 目前，Cyble的OSINT研究揭示了两种传播渠道，一种是通过带有恶意链接的短信，一种是依靠网络钓鱼电子邮件。...安全人员建议，用户应避免点击未经确认的短信和电子邮件中的链接，并避免安装Google Play商店之外的 APK 文件。...此外，要定期确认设备上的 Google Play Protect 是否处于活动状态，并在安装新应用时仔细检查权限请求。
cd electron-flash-demo # 删除原来的git文件夹 rmdir /s/q .git rmdir /s/q .github npm install npm start 下载32位的...如图 老版本的Chrome下载 里面带有pepflashplayer插件 https://www.slimjet.com/chrome/google-chrome-old-version.php 这里推荐下载...32位的最老的版本 Version Size Date 48.0.2564.97 40.76 MB 2020-04-29 这个插件已经很难下载到了，我的方法是下载个360浏览器带极速内核的版本，打开一个带有...配置插件 把下载的插件放在项目根目录下libs文件夹下，如图所示： main.js中添加以下代码 let pluginName switch (process.platform) { case...注意NodeJS的版本要在14以上 nvm install 14.17.1 nvm use 14.17.1 依赖版本号 "electron-builder": "22.9.1" "electron-builder
你说为啥现在前端这么累，一会做h5网页，一会pc网站，一会又是服务端渲染，一会又来一个桌面应用，一会又是App，是不是就差操作数据库了，不，不对，如果你是走的node 方向，那你就做到了，哈哈哈 vue...打包这些流程我相信大家都已经知道了吧，不管你是vue cli 2 还是vue cli 3 打包出来都是有dist 文件的，至于前面的操作不懂的这些可以百度，多得很，我就直接给你们讲，如何打包桌面应用就好...Electronjs 这个就是一个很厉害的 js了，果然如传说一样 管你c++还是java，一把js 走天下，拿到需求就是干 对于这个 JS 不懂的可以去看看，这个的确很强大，里面功能很全，但是如果你只是要打包的话...项目中 用npm 或cnpm 的形式引入这2个命令 npm install electron --save-dev npm install electron-builder --save-dev.../src/assets/yizhu.ico 代表的exe文件 图标 如果你这些都已经配置好了，你就执行下面的命令就可以进行打包一个预览包了 npm run electron_build
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
