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: