上一篇文章 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: