资讯专栏INFORMATION COLUMN

Electron + vue 打包桌面操作 流程

idealcn / 2304人阅读

摘要:提前准备一个项目,也可以使用初始的项目安装到后边有的会出现报错,可以忽略,启动启动成功就可以在项目下执行下载以下依赖,会用到这个是打成文件的插件,之后要用,提前下载好获取的资源这里我用的是太慢了将获取到资源的复制到里面的里

提前准备一个vue项目,也可以使用初始的vue项目
vue init webpack
安装到后边有的会出现报错,可以忽略,启动npm run dev 启动成功就可以

在vue项目下执行下载以下依赖,会用到
cnpm install electron --save-dev
cnpm install electron-packager --save-dev //这个是打成exe文件的插件,之后要用,提前下载好
获取Electron的资源
git clone https://github.com/electron/e...
cd electron-quick-start
cnpm install //这里我用的是cnpm,npm太慢了

将Electron获取到资源的main.js复制到vue里面的bulid里面并修改为electron.js

然后修改


将assetsPublicPath: "/" 改为./,都是为了获取准确的路径
然后再修改electron.js

改为 这个pathname: path.join(__dirname, "../dist/index.html")
不懂的可以去搜vue 的 dist

这些改好了之后配置package.json

用来启动 npm run abc

启动成功为

启动成功可以执行下一步
在配置打包的package.json

关于electron-packager的配置,简单介绍一下。
electron-packager --platform= --arch= [optional flags...]

sourcedir 资源路径,在本例中既是./dist/

appname 打包出的exe名称

platform 平台名称(windows是win32)

arch 版本,本例为x64

到这里还没有完因为还有坑呢
我就把坑跳过

将bulid的electron.js文件复制到dist中,将package.json也复制到当中(提示dist文件和里面内容自动生成不用自己创建)
然后修改electron.js

mainWindow.loadURL(url.format({

pathname: path.join(__dirname, "index.html"),
protocol: "file:",
slashes: true

}))
再修改复制到dist中的package.json

再启动npm run go 会出现打包成功的文件夹
再从里面寻找exe文件 就可以了!!!!!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/104951.html

相关文章

  • 使用 electron-vue 构建你的桌面应用

    摘要:翻译一下它是一个运行时,可以像一样这样执行也是一个使用构建跨平台原生桌面应用的框架。具有两个进程,分别是主进程,以及渲染进程。 什么是 electron 官网里这么说:Electron提供了一个Nodejs的运行时,专注于构建桌面应用,同时使用web页面来作为应用的GUI,你可以将其看作是一个由JavaScript控制的迷你版的Chromium浏览器。 翻译一下:它是一个运行时,可以像...

    qieangel2013 评论0 收藏0
  • electron 将pc端(vue)页面打包桌面端应用

    摘要:于是乎,就想着把自己写的这个小项目打包成桌面端,方面每次打开电脑就能看。然后继续运行,然后白屏习惯性的首次失败。。解决方法进入文件夹下的将其中的修改为相对路径。再次运行,成功将的项目,显示为桌面应用。总结至此,打包桌面端就这样完成了。 背景 showImg(https://segmentfault.com/img/bVYowg?w=1922&h=862); 最近在学习RxJS,平时边看...

    Dongjie_Liu 评论0 收藏0
  • electron原来这么简单----打包你的react、VUE桌面应用程序

    摘要:话不多说,进入正题一安装为了方便你以后的使用,建议全局安装。怎么安装就不废话了,不会的去官网,安装好之后也安装一个专用的打包工具,以方便我们后面打包的时候使用。有些只能在该事件发生后才能被使用。 也许你不甘心只写网页,被人叫做他会写网页,也许你有项目需求,必须写桌面应用,然而你只会前端,没关系。网上的教程很多,但是很少有能说的浅显易懂的,我尽力将electron打包应用说的清晰明了,希...

    shevy 评论0 收藏0
  • electron原来这么简单----打包你的react、VUE桌面应用程序

    摘要:话不多说,进入正题一安装为了方便你以后的使用,建议全局安装。怎么安装就不废话了,不会的去官网,安装好之后也安装一个专用的打包工具,以方便我们后面打包的时候使用。有些只能在该事件发生后才能被使用。 也许你不甘心只写网页,被人叫做他会写网页,也许你有项目需求,必须写桌面应用,然而你只会前端,没关系。网上的教程很多,但是很少有能说的浅显易懂的,我尽力将electron打包应用说的清晰明了,希...

    suemi 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<