首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

electron 将pc端(vue)页面打包为桌面端应用

打包桌面端,跟前端框架无关,只是想夸一下vue在构建项目上体验真的好,简单方便,会以yes or no形式让你完成一个主流前端框架(回想以前构建angular应用,还要打开help,看一大堆api...,在这一点用户体验上angular真是输了,不知道最近ng5变没变)。...然后继续运行npm run start,然后白屏(习惯性首次失败。。),不过问题也很快解决了,因为vue打包项目,默认使用是绝对路径,所以到这里就有点小问题。解决方法: ?...到这一步,一直非常顺利,然而就在一切都理所应当时候,打包exe文件出现了问题。 打包exe文件 以上这些东西自己连调带试搞了1小时左右吧,没看时间,反正觉得挺快。...然而,之后打包这个exe就花了1个小时还多!心好累。。。 首先,为之前下载好electron-packager,增加一条启动命令。

2.1K20
您找到你想要的搜索结果了吗?
是的
没有找到

Electron 使用 Webpack2 预编译 Electron 和 Browser targets

前一篇文章说了说怎样使用 Webpack2 预编译 Electron 应用,但是有时候我们希望使用 Webpack2 热部署功能来提高我们开发效率,使我们在代码修改后能自动立即看到修改后结果。...scripts 中 electron 使用 "webpack --target electron-renderer" 来打包js和css,然后仍然使用 electron 来运行应用程序。...scripts 中 web 使用 "webpack --target web" 打包js和css,同样,后面在使用 webpack-dev-server 时也需要使用 "--target web"选项...scripts 中 packager 定义了打包程序为一个可执行程序。...打包 electron 应用程序 $ npm run packager 上面程序执行后,会在当前目录下生成 myapp-linux-x64 目录,然后运行 myapp-linux-x64/myapp

1K70

Node.js实现桌面应用

说到桌面应用程序,可能更多人会想到使用QT或者JAVA FX去实现,Node.js能实现桌面程序么?可能很多人对这个问题答案抱着怀疑态度。...其实在理解看来electron角色有点类似于打包工具,我们可以使用H5开发一个网站,然后直接使用打包工具打包成一个app。...接下来我们需要将我们应用打包生成桌面应用启动文件,打包就需要使用我们刚才一开始安装依赖:electron-packager。...这句打包命令意思就是:使用electron-packager包将当前文件目录下资源命名成niyueling打包到父级electron-node文件夹。...如果想一次性打包所有操作系统可执行文件,可以使用命令: electron-packager . niyueling --out ..

7.8K40

前端构造桌面级应用(QQ音乐)

项目注意事项 我们需要在node启动服务器里面(也就是本地服务器中)解决跨域问题 使用nw时候需要解决不能播放音频问题 index.html以及静态资源这些路径问题 4....B 为了解决 当dist文件拖入nw打开 或者 直接打开dist目录index.html 以及使用electron打包之后 接口访问跨域问题 import path from 'path...electron npm install electron -g 本地安装 npm install electron --save-dev 打包工具 这里打包工具选择electron-packager...] } 说一下命令行配置: packager": "electron-packager ....相关资料 打造你第一个electron应用 github地址 常用打包工具 Electron: 从零开始写一个记事本app electron打包electron-packager

2.7K40

Electron桌面应用打包流程(记录一下)

安装electron-packager 接下来安装electron-packager ,它也是一个npm模块,是一个用于打包electron应用工具 npm install -g electron-packager...打包 现在整个过程进行到最后一步,我们需要打包我们自己应用,那么如何打包,这就需要用到我们先前已经安装electron-packager 打开命令行我们可以这样使用它: electron-packager...这个参数是当前安装Electron版本,不知道可以直接electron就能看到了,这里是1.4.13,经过改进后如下: electron-packager ....更改图标 如果我们想要更改窗口左上角图标和任务栏图标,只需要在打包命令上加个icon参数就好了 electron-packager . HelloWorld --win --out .....NSIS 打包 Electron 生成exe安装包 NSIS操作简单,而且打包出来安装包,安装过程和卸载过程都更加正规。推荐使用 一.

5.8K62

公司居然把所有在线音乐都屏蔽了,所以我决定......

写在前面 人真的是会变得越来越懒,也正是人惰性吧,真的是很讽刺。 关于这个应用程序开发,断更了很久,但是代码部分还算没落下吧,终于在周一、周二终把这个应用程序写完了。 开发完不是终点。...electron-packager打包 使用如下命令安装: npm install electron-packager --save-dev 安装好之后会在package.json中devDependencies...内置autoUpdate进行更新 3、支持CLI和JS API两种使用方式; 3、使用electron-builder打包 electron-builder比electron-packager有更丰富功能...除了这几点之外,由electron-builder打出包更为轻量,并且可以打包出不暴露源码setup安装程序。考虑到以上几点,果断选择了electron-builder。...整体感受 万事开头难,在开发环境搭建及应用程序打包方面花费时间是最多,目前网上博主真的好多,但是靠谱真的很少,大部分都是复制别人,真的很坑。

87020

Electron 使用 Webpack2 打包多入口应用程序

但是假如我们有多个页面,且每个页面需要使用js文件也不同,那么我们应该怎样打包呢。...安装依赖库 这里准备做个小演示程序,首先安装一些这个演示程序需要看第三方库 $ npm install --save-dev electron $ npm install --save-dev electron-packager...定义了 app 入口 scripts 中 electron 定义了一个命令用来使用 webpack 打包使用 electron 来运行应用程序 scripts 中 packager 定义了打包程序为一个可执行程序...来运行应用程序。 访问不同页面观察日志输出可以发现每个页面均使用了各自 bundle.js 文件。...打包 electron 应用程序 $ npm run packager 上面程序执行后,会在当前目录下生成 myapp-linux-x64 目录,然后运行 myapp-linux-x64/myapp

1.2K70

你不知道 Electron (二):了解 Electron 打包

--win --mac --ia32 详细参数:Command Line Interface (CLI) 使用 electron-packager 打包 安装依赖: npm i electron-packager...具体每个字段值可以看 electron-packager/usage.txt 注: OS X 下打包 Windows 应用需要安装 Wine才行,electron-packager 需要使用 node-rcedit...electron-builder 打包分析 文件大小分析 因为要达到跨平台目的,每个 Electron 应用都包含了整个 V8 引擎和 Chromium 内核,以致于一个空 Electron 项目,...不同应用程序只需要重新打包好相应 app.asar 即可。...最后对这个可执行程序图标等信息进行修改就可以得到我们应用程序了~ 打包可能存在问题 electron-builder 打包虽然帮我们把一些文件过滤掉不进行打包,但是我们项目源码是没有经过任何处理打包了进去

2.8K20

你不知道 Electron (二):了解 Electron 打包

/cli 使用 electron-packager 打包 安装依赖: npm i electron-packager --save-dev 打包electron-packager <sourcedir...V8 引擎和 Chromium 内核,以致于一个空 Electron 项目,使用 electron-builder--dir 打包后没有压缩项目文件夹,大小也已经到了 121.1 MB。...如果使用 electron-builder 进行打包,安装程序大小为 36MB,这个大小是可以接受。 但是上面是一个空项目,那么一个实际项目打包之后有多大呢?...不同应用程序只需要重新打包好相应 app.asar 即可。...最后对这个可执行程序图标等信息进行修改就可以得到我们应用程序了~ 打包可能存在问题 electron-builder 打包虽然帮我们把一些文件过滤掉不进行打包,但是我们项目源码是没有经过任何处理打包了进去

4.5K20

Electron快速上手并将网站直接生成桌面应用

介绍 使用 JavaScript,HTML 和 CSS 构建跨平台桌面应用程序 基于 Chromium 和 Node.js 让你可以使用 HTML, CSS 和 JavaScript 构建应用.../electron/ 打包 注意:图标格式 Windows 下使用 icon.ico Mac 使用是 icon.icns 使用electron-forge 安装 npm install --save-dev...@electron-forge/cli npx electron-forge import 使用 npm run make 打包参数配置 package.json文件里config => forge...=> packagerConfig 使用electron-packager 安装 npm install --save-dev electron-packager 使用 npx electron-packager...因此,您可以导入Chrome应用程序中不容易使用许多模块 Electron文档要好得多 缺点 不适合开发轻量级应用。即使一个electron项目框架,也包含chromium内核。

2.4K122

使用Electron创建跨平台桌面应用

例子:your need a hero 在这个例子里面将会创建一个简单应用,它会使用 Marvel API 拉取25位超级英雄信息并且显示他们名字和缩略图,创建完成之后应用会有一个应用图标,最终使用用户不会知道到应用是如何被创建不能看到程序源代码...打包应用程序 打包代码成为一个 原生应用非常简单只需要一个应用图标,它外观和文件类型取决于你应用运行操作系统,在这里使用图标来自Marvel官方安卓APP。 ?...最简单打包方法是使用 electron-packager,这是一个npm模块(注意:需要单独安装),他可以生成一个体积比较大二进制文件,当然对于桌面应用来讲这应该不算是什么大问题,如果你比较在意体积大小...在命令行使用如下命令打包应用(替换为你项目相关参数): `electron-packager /Users/chrisward/Workspace/sp_electron MarvelBrowse...写这篇文章使用 Atom,与编辑联系使用Slack ,用来测试程序使用Docker容器通过 Kitematic创建,他们都是使用Electron生成应用程序

1.4K40

Electron打包以及使用CloudKit做自动更新服务

toc Electron打包 Electron自动更新 Mac 版本签名 自动更新服务端 Electron打包 Electron代码编写之后便是打包, 官网 介绍了几种方法,用了 electron-packager...use from cli npm install electron-packager -g 以及打包 electron-packager <sourcedir> <appname>...: electron-packager ./ --all 打包Mac版就可以这样 electron-packager ./ --platform=darwin --arch=x64 打包完会在项目根目录下生成打包文件目录...),所以在打包时候需要附带签名信息,具体可以参考 electron-osx-sign Mac App Store版不能有自动更新,非Mac App Store版打包命令 electron-packager...打包app有200~300M)上传下载速度(大家可以通过Hipo cloudkit测试),因此就考虑使用CloudKit。

98220

利用Electron把Web项目打包成桌面应用

使用Demo:electron-quick-start 打包工具:electron-packager 安装 1.Electron是基于Node.js开发,第一步当然要安装node盒npm了,就不多说了...electron-builder electron-packager 第一个工具是建立安装程序,打包成.exe和.app的话,我们选择第二个。...6.参考了网上很多教程,其实也就几个版本,说都一样,都没搞定,还是自己动手,丰衣足食。仔细看看,项目仓库README.md说很清楚,有几点需要注意。...简单使用 cd electron-quick-start //项目目录 electron-packager ./ Hello -all //-all 其实就是 --platform=all --arch...=all (在usage.txt里有解释) 可能会重新下载Electron安装包,几十M,等了十几分钟,速度还是几K,看看当前Electron版本,强制使用当前版本。

1.7K70

ASAR 完整性检查 | Electron 安全

", "..."] } 另外,在打包Electron应用程序时,您需要定义整个ASAR头十六进制编码哈希 启用ASAR完整性后,您Electron应用程序将在运行时验证ASAR存档头部哈希。...提供此打包哈希过程对于 macOS 和Windows 是不同 1) 使用 Electron Forge 和 Electron Packager Electron Forge和Electron Packager...ASAR完整性所需最低版本为: @electron/packager@18.3.1 @electron/forge@7.4.0 2) 使用其他构建系统 MacOS 为macOS打包时,您必须在打包应用..."9d1f61ea03c4bb62b4416387a521101b81151da0cfbe18c9f8c8b818c5cebfac" } ] 有关实现示例,请参见 Electron Packager...,之后同样使用 Electron Forge 打包,之后使用原本正常头部替换掉不正常头部,再将组合成恶意asar文件替换到正常文件,我们看一下,此时程序是否正常,是否能够发现篡改行为 1) 生成恶意

32710

vue 打包桌面应用 并发布

打包这些流程相信大家都已经知道了吧,不管你是vue cli 2 还是vue cli 3 打包出来都是有dist 文件,至于前面的操作不懂这些可以百度,多得很,就直接给你们讲,如何打包桌面应用就好...进入文档,你就会发现,去,有很多都不知道是什么操作,但是不用知道,你就知道是打包工具就好,用git 命令去拉取官网这个代码,他这个代码也可以,但是如果你是vue 同学,你想直接搞份demo 来修改就可以运行看到效果...# 进入这个仓库 $ cd electron-quick-start # 安装依赖并运行 $ npm install && npm start 这是官网demo ,可以下载来运行 好了,相信你肯定不愿意打包..."electron_dev": "npm run build && electron build/electron.js", "electron_build": "electron-packager...如果出现这个了,恭喜了,vue打包桌面应用程序已经完成了,但是你这个要是想发给别人安装看,你这个还不行哟,还需要进行打包才能哟,推荐一个简单 看完另一篇新博客有讲解 https://blog.csdn.net

1.5K40
领券