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/ ├─
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 打包全平台桌面应用的记录。 ~ ~ 本文完，感谢阅读！ ~ 学习有趣的知识，结识有趣的朋友，塑造有趣的灵魂！
写在前面 人真的是会变得越来越懒的，也正是人的惰性吧，真的是很讽刺。 关于这个应用程序的开发，断更了很久，但是代码部分还算没落下吧，终于在周一、周二终把这个应用程序写完了。 开发完不是终点。..."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
js调用丰富的原生api来创造桌面应用，你可以可以把我看作是nodejs的变异体，只是我专注的是桌面应用，而nodejs专注的是web服务端。...使用我之前首先要明白我本质上是什么，如果经常使用nodejs的人，那么恭喜你，你在使用我的时候将会十分的得心应手，因为本质上来说，我就是一个nodejs的应用程序，只不过应用的入口文件是package.json...文件，我的样子是这样的： your-app/ ├── package.json ├── main.js └── index.html 这里不让他说了，我这里简单的说一下，就是关于怎么创建一个package.json...打包vue项目 在我们写好的项目文件夹中运行 npm run build 结束以后在我们的项目中多出来一个dist的文件包，那么这个就是我们打包结束的文件，我们可以直接运行里面index.html文件...--dir", "dist": "electron-builder", "postinstall": "electron-builder install-app-deps" },
实际上Node.js现在生态圈越来越完善，所以用Node.js实际上可以非常轻松的架构一个桌面应用。今天我们来讲讲Node.js是如何构建一个桌面应用。 首先我们需要创建一个Node.js项目。 ?...electron-prebuilt electron-packager electron-builder ?...在macOS中，当点击应用图标并且没有其他窗口打开时，会重新创建一个窗口 ，所以在activate方法中要做判断，如果窗口对象win为null，则创建一个新窗口。否则展示已存在的窗口。 ?...，如router文件夹。...只要我们桌面应用主线程逻辑不变，不管是UI做了调整还是交互效果做了修整，我们则只需要更新router文件夹下的资源，而无需重新发布新安装包。
# 1 通常pc软件的安装过程中，会加入用户协议，如： 下面介绍一下使用electron-builder打包应用，如何加入license。...首先参考官网介绍：windows：nsis[1]，macOS：dmg[2] # 2 官网上关于license配置说明写的不是很详细，下面是我实践总结出的正确的姿势： 最简单的方法是在你的项目/build...但是ANSI在macOS下是不行的，所以更推荐的方案是使用 “带有BOM的UTF-8“，这样在windows，macOS下都可以使用。...image-20210122100244716 /build是electron-builder默认资源目录，也可以修改，比如我这里是public目录： directories: { buildResources...# 3 如果要支持多语言，只需修改license文件名添加对应的语言代码后缀，如：license_xxx.txt。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
云直播
