资讯专栏INFORMATION COLUMN

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

Dongjie_Liu / 3508人阅读

摘要:于是乎,就想着把自己写的这个小项目打包成桌面端,方面每次打开电脑就能看。然后继续运行,然后白屏习惯性的首次失败。。解决方法进入文件夹下的将其中的修改为相对路径。再次运行,成功将的项目,显示为桌面应用。总结至此,打包桌面端就这样完成了。

背景

最近在学习RxJS,平时边看文档边顺手就敲一敲那些API,有时候想回顾一些自己写的东西,就要先把项目跑起来,这也难免有些麻烦。于是乎,就想着把自己写的这个小项目打包成桌面端,方面每次打开电脑就能看。经过网上查阅,比较成熟的解决方案很多,比如electron,nw.js等等。最终选定用electron,因为他的星星最多,哈哈。

这个练手Rxjs的小项目是用vue跑的,之前没玩过vue,顺手玩一下。打包桌面端,跟前端框架无关,只是想夸一下vue在构建项目上的体验真的好,简单方便,会以yes or no的形式让你完成一个主流的前端框架(回想以前构建angular应用,还要打开help,看一大堆api,在这一点用户体验上angular真是输了,不知道最近的ng5变没变)。

electron

Electron uses Chromium and Node.js so you can build your app with HTML, CSS, and JavaScript. Open Source Cross Platform Compatible with Mac, Windows, ...

简单来说,electron是基于Chromium 和 Node.js 来构建一个跨平台应用的。Chromium是一个开源浏览器,与chrome区别是不会自动更新,但是一些新特性貌似会在Chromium先上。

electron-quick-start

最开始的时候,没敢直接在vue中插入这个electron(毕竟连怎么用都不知道),于是先clone了一个starter来快速学习一下。

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
cnpm install //这里我用的是cnpm,npm太慢了 
npm start

项目跑起来之后,不出意外就出现了electron的桌面端页面,看了下其中的入口文件main.js

 mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, "index.html"),
    protocol: "file:",
    slashes: true
  }))

这段代码就是配置桌面端应用的入口,于是果断去把vue的项目打包,直接把前端静态资源扔到这里,替换之前的文件。然后继续运行npm run start,然后白屏习惯性的首次失败。。),不过问题也很快解决了,因为vue打包项目,默认使用的是绝对路径,所以到这里就有点小问题。解决方法:

进入config文件夹下的index.js将其中的assetsPublicPath修改为相对路径 ./。

再次运行npm run start,成功将vue的项目,显示为桌面应用。

此时还是在electron的starter项目当中,这样显然太麻烦了,于是下面就将electron引入 vue。

vue 中引入electron

首先在vue项目的package.json中加入electron的依赖,

cnpm install electron --save-dev 
cnpm install electron-packager --save-dev //这个是打成exe文件的插件,之后要用,提前下载好

把electron-quick-start项目中的main.js搬到vue的build文件中,并改个名字electron.js

因为文件的相对位置进行了改变,electron的入口文件变成了vue build之后的文件地址,也就是dist文件夹下的 index.html,所以此时的electron.js 里面的引用地址也要变,即:

mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, "../dist/index.html"),
    protocol: "file:",
    slashes: true
  }))

在package.json文件中增加一条指令,用来启动electron,即:

"scripts": {
    "dev": "node build/dev-server.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "lint": "eslint --ext .js,.vue src",
    "electron_dev": "npm run build && electron build/electron.js"
  },

electron_dev 就是用来启动electron的,在此之前我们一定要确保项目当中已经有构建好的静态资源文件,因此 在运行 electron build/electron.js 之前,首先运行 npm run build。

经过这样的处理,在命令行中,运行 npm run electron_dev之后,就会将之前在electron-quick-start中显示的桌面应用,再次显示出来。

到这一步,一直非常顺利,然而就在一切都理所应当的时候,打包exe文件出现了问题。

打包exe文件

以上这些东西自己连调带试的搞了1小时左右吧,没看时间,反正我觉得挺快。然而,之后打包这个exe就花了1个小时还多!心好累。。。

首先,为之前下载好的electron-packager,增加一条启动命令。

 "scripts": {
    "dev": "node build/dev-server.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "lint": "eslint --ext .js,.vue src",
    "electron_dev": "npm run build && electron build/electron.js",
    "electron_build": "electron-packager ./dist/ --platform=win32 --arch=x64 --icon=./src/assets/favicon.ico --overwrite"
  },

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

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

appname 打包出的exe名称

platform 平台名称(windows是win32)

arch 版本,本例为x64

后边的配置项都是选填,可以设置二进制打包等,默认是没有这些的,这里只选填了exe的图标。

npm run electron_build

运行打包exe的命令,还是一如既往的顺利,项目中成功出现打包好的文件夹,但是去文件夹中启动exe时,状况发生了。

报错说找不到一个合法的app,什么鬼。。。
谷歌上搜了半天,有说版本不对,重新下载node模块的,有说路径不对的。其中我看到报错指向了asar,可我明明没有设置二进制打包啊,于是跟这个asar斗争了很久。

最后发现跟这个asar屁关系没有!

在看到有相关问题出现的谈论下,看到解决方案是没有把package.json放入文件夹,开始还搞不明白为什么还要一个package.json ,后来翻回头来才发现自己太想当然了,以为dist/下是去拿index.html,其实人家是要去拿package,然后再去找入口的js,最后才去找index.html.

于是先手动在dist文件夹下增加electron.js和package.json。

package的main指向从build文件夹中复制来的electron.js(记得把electron.js中index.html的路径做修改)

 mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, "index.html"),
    protocol: "file:",
    slashes: true
  }))

再次运行npm run electron_build得到打包好的文件夹,找到其中的*.exe,双击运行,终于又出现了熟悉的画面。

总结

至此,vue打包桌面端就这样完成了。在此过程中,发现自己做东西还是有些武断,太想当然了,导致在一些弯路里绕了很久。以后还是要多看文档,稳扎稳打!

项目地址:https://github.com/jiwenjiang...

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

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

相关文章

  • 使用React、Electron、Dva、Webpack、Node.js、Websocket快速构建

    摘要:是一个使用和等技术创建原生程序的框架,它负责比较难搞的部分,你只需把精力放在你的应用的核心上即可。谈谈技术选型使用去做底层的绘制,大项目首选状态管理的最佳实践肯定不是,目前首选,或者。 showImg(https://segmentfault.com/img/bVbtqlI?w=1308&h=565); 目前Electron在github上面的star量已经快要跟React-nativ...

    Caicloud 评论0 收藏0
  • 使用React、Electron、Dva、Webpack、Node.js、Websocket快速构建

    摘要:是一个使用和等技术创建原生程序的框架,它负责比较难搞的部分,你只需把精力放在你的应用的核心上即可。谈谈技术选型使用去做底层的绘制,大项目首选状态管理的最佳实践肯定不是,目前首选,或者。 showImg(https://segmentfault.com/img/bVbtqlI?w=1308&h=565); 目前Electron在github上面的star量已经快要跟React-nativ...

    Me_Kun 评论0 收藏0
  • XCel 项目总结 - ElectronVue 的性能优化

    摘要:而这里的单元格信息是唯一的,所以直接通过为一个空对象赋值即可。和相关的知识和技巧高亮的列单元格采用展示。在中,被选中的单元格会高亮相应的行和列,以提醒用户。 showImg(https://segmentfault.com/img/bVGkdk?w=900&h=500); XCEL 是一个 Excel 数据清洗工具,其通过可视化的方式让用户轻松地对 Excel 数据进行筛选。 XCEL...

    XUI 评论0 收藏0
  • 从用 AngularJS 开发 PC 客户说起

    摘要:你们说能不能就用的开发模式来实现客户端啊这样版版版就都有了。有道云笔记可能就是最贴近我们想法的产品,有客户端,有版。这个项目由发起和维护。 最近一个多月一直在用 AngularJS 做公司的一个项目(还没有做完),我之前主要是用 PHP 开发服务端的,AngularJS 也是现学现卖,整个过程还是比较有意义的,觉得很有必要写篇文章记录一下。 缘起 事情是这样的……我们团队的产品是一款 ...

    waltr 评论0 收藏0

发表评论

0条评论

Dongjie_Liu

|高级讲师

TA的文章

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