首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >electron 将pc端(vue)页面打包为桌面端应用

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

作者头像
j_bleach
发布2019-07-02 11:28:41
2K0
发布2019-07-02 11:28:41
举报
文章被收录于专栏:前端加油站前端加油站

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/j_bleach/article/details/78513282

背景

这里写图片描述
这里写图片描述

最近在学习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 <sourcedir> <appname> –platform=<platform> –arch=<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/rxjs-practice

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017年11月12日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 背景
  • electron
    • electron-quick-start
    • vue 中引入electron
    • 打包exe文件
    • 总结
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档