html桌面应用打包工具,Electron将Web页面打包成桌面应用实例

Electron将Web页面打包成桌面应用实例

发布时间：2018-07-02 12:07,

浏览次数：751

, 标签：

Electron

Web

上一篇文章 Electron-vue脚手架改造vue项目

介绍了如何将Vue项目构建成桌面应用的方法。

这篇文章将继续介绍Electron构建桌面项目，不仅仅局限于Vue项目，使用Vue项目做案例，只是目前做的Vue项目比较多，拿其中一个练手比较方便。

事实是，将项目打包成桌面应用跟使用什么前端框架没有关系，通过Electron任何项目都能打包成桌面应用

electron官网：https://electronjs.org/docs/tutorial/first-app

入门：electron-quick-start如何快速启动一个Electron桌面程序？

通过启动一个官网的Electron案例，快速了解入门

克隆一个Electron官网推荐的快速启动程序，简单了解Electron构建桌面程序的流程

git clone https://github.com/electron/electron-quick-start cd

electron-quick-start npm install // 或者 yarn install npm start

clone项目到本地，目录结构为：

项目跑起来之后，可以看到欢迎界面

重点关注main.js、package.json、index.html这几个文件

在入口文件main.js中，这段代码就是配置桌面端应用的入口

mainWindow.loadFile('index.html') // 方法一 mainWindow.loadURL(url.format({ //

方法二 pathname: path.join(__dirname, 'index.html'), protocol: 'file:', slashes:

true })) mainWindow.loadURL('https://www.baidu.com') // 方法三

三种方式任选其一，方法一中 mainWindow.loadFile() 方法可以读取本地网页，方法二是将本地网址稍做转义，方法三中

mainWindow.loadURL() 方法可以写入线上地址。

不难猜测，只要将网页地址写入 loadFile() 方法或者 loadURL() 方法之后，运行 npm start  命令，就能构建一个桌面应用啦。

了解完Electron的基本流程，如果想把Vue项目跑在桌面应用上，只要先将Vue应用打包，将打包之后的文件(默认在dist目录文件夹下)拷贝到当前

electron-quick-start 目录替换 index.html，继续运行 npm start 。

可能出现白屏，不用太担心，Vue项目打包的时候默认使用绝对路径，进入Vue项目/config/index.js修改构建路径就OK啦

build: { index: path.resolve(__dirname, '../dist/index.html'), assetsRoot:

path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static',

assetsPublicPath: './', // 将默认的绝对路径修改成相对路径哦 productionSourceMap: true, devtool:

'#source-map', productionGzip: false, productionGzipExtensions: ['js', 'css'],

bundleAnalyzerReport: process.env.npm_config_report }

再次运行项目，就能成功显示Vue桌面项目。

如果每次都是通过electron-quick-start为基础，再将Vue项目打包，拷贝到对应位置，会比较麻烦，接下来就介绍如何将

Electron引入Vue项目

如何在Vue项目中直接使用Electron？

在介绍如何在Vue项目中引用Electron之前，先明确electron-quick-start是如何运行起来的。

从 package.json 文件看起，我们运行 npm start 命令 其实是 运行了 electron . 命令，该命令会从当前目录文件中寻找

package.json 文件，找到 package.json 文件 然后读取 package.json 文件 中的 main 值，main值 指向

main.js文件，然后运行 man.js 文件，找到index.html文件，创建桌面应用实例。

{ "name": "electron-quick-start", "version": "1.0.0", "description": "A

minimal Electron application", "main": "main.js", "scripts": { "start":

"electron ." }, "repository":

"https://github.com/electron/electron-quick-start", "keywords": [ "Electron",

"quick", "start", "tutorial", "demo" ], "author": "GitHub", "license":

"CC0-1.0", "devDependencies": { "electron": "^2.0.0" } }

了解了Electron启动步骤，接下来就介绍如何将Electron引入Vue项目

步骤一：安装Electron依赖包

npm install electron --save-dev

步骤二：将 electron-quick-start 项目中的 main.js 搬到vue项目根目录，可以改个名字叫 .electron.js

，其实放到哪和叫什么名字大家随意，只要找得到，看的明白就行

步骤三：步骤二中的main.js(重命名为 .electron.js，以下都叫做 .electron.js 文件)入口文件位置改变，其中

读取index.html文件的地址也要随之改变，也就是改成Vue项目打包之后dist/index.html目录

mainWindow.loadURL(url.format({ pathname: path.join(__dirname,

'../dist/index.html'), protocol: 'file:', slashes: true }))

步骤四：在package.json文件中增加一条指令，用来启动Electron桌面应用

"scripts": { "dev": "webpack-dev-server --inline --progress --config

build/webpack.dev.conf.js", "start": "npm run dev", "build": "node

build/build.js", "electron_dev": "npm run build && electron .electron.js" //

electron是命令 .electron.js是文件 该命令是指用electron运行.electron.js文件，即运行入口文件 }

npm run electron_dev 命令就可以启动Electron桌面应用，在此之前需要确保项目当中已经有构建好的静态资源文件，因此 在运行

electron .electron.js之前 需要先运行 npm run build。

在命令行中，运行 npm run electron_dev之后，就能显示当前Vue项目的桌面程序。

若采用electron-quick-start 项目中启动方式，需调整如下：(注意调整了electron_dev命令，增加了main参数)

"main": ".electron.js", "scripts": { "dev": "webpack-dev-server --inline

--progress --config build/webpack.dev.conf.js", "start": "npm run dev",

"build": "node build/build.js", "electron_dev": "npm run build && electron ."

// electron . 运行一个目录，这个目录必须遵循node模块规范 }

electron . 命令运行当前目录并读取 package.json 中 main值 ，运行 main值 中的文件

在此，我们介绍了两种Electron运行方式， electron . 和 electron .electron.js

// 直接运行入口文件 electron .electron.js // 从当前目录寻找 package.json 文件，读取文件中的 main值，运行

main值 中的文件，main值 中的文件其实就是 .electron.js 入口文件 electron .

还有第三种运行方式，electron ，

electron

没有参数的时候默认是运行当前的 resources/app 目录或者resources/app.asar

(.asar是一种压缩文件，详情参考官网)，这两个都不存在的时候运行resources/default_app

步骤五：在实际项目开发中，这样操作也是比较麻烦的，每次修改之后都需要重新运行 npm run electron_dev 命令，可行的办法是，修改

.electron.js文件 ，监听 npm run dev 启动之后的地址

mainWindow.loadURL('http://localhost:8080/' + '#')

此时就需要启动两个服务，一个 electron .  ，一个 npm run dev

如何打包成.exe文件？electron-packager打包Electron

步骤一：增加一条启动命令，(先安装好npm install electron-packager --save-dev哦！)

"main": ".electron.js", // 不要忘记设置入口文件 "scripts": { "electron_build":

"electron-packager ./ --platform=win32 --arch=x64 --overwrite" // 注意事项

electron-packager ./ 会取当前目录下packager.json文件(即当前文件)中main值指向的入口文件 }

关于 electron-packager 的配置，简单介绍一下。

语法：electron-packager –platform= –arch=

[optional flags…]

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

2. appname 打包出的exe名称

3. platform 平台名称(windows是win32)

4. arch 版本，本例为x64

5. [optional flags…] 配置项选填，可以设置二进制打包等，默认没有这些

步骤二：运行打包命令

npm run electron_build

步骤三：在文件目录下可以找到callcenter-win32-x64文件夹

双击运行.exe文件就能看到熟悉的界面啦

更多Electron 打包方式：electron打包：electron-packager及electron-builder两种方式实现桌面端应用程序打包

与君共勉：再牛逼的梦想，也抵不住傻逼般的坚持！