Electron打包桌面应用程序 _打包

打包桌面应用程序
是一个使用、HTML 和 CSS 构建桌面应用程序的框架。
项目地址：
博客地址：
一、初始化项目
1、npm init指令初始化项目配置：
entry point选项的值应为main.js
和也必须填写，但是可以填写任意值
.json
{"name": "electron-app","version": "1.0.0","description": "a electron app demo","main": "main.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "xxx@gmail.com","license": "ISC"}
2、安装依赖：
npm install --save-dev electron electron-builder
3、修改.json，在里添加start指令：
"start": "electron ."
4、执行npm start启动项目，会发现如下图报错：
这是因为现在还没有mian.js文件，线程找不到主进程。
二、创建视图文件和入口文件
1、新建index.html视图文件。
Electron AppElectron App这是我的第一个桌面应用程序
2、再创建.js预加载脚本文件：
// preload.jswindow.addEventListener('DOMContentLoaded', () => {const replaceText = (selector, text) => {const element = document.getElementById(selector)if (element) element.innerText = text}for (const type of ['chrome', 'node', 'electron']) {replaceText(`${type}-version`, process.versions[type])}})
3、接下来创建main.js入口文件，内容如下：
// main.jsconst { app, BrowserWindow } = require('electron')const path = require('path')const createWindow = () => {const mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, 'preload.js')}})// 加载 index.htmlmainWindow.loadFile('index.html')}// 部分 API 在 ready 事件触发后才能使用。app.whenReady().then(() => {createWindow()app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) createWindow()})})// 当所有窗口都被关闭的时候退出程序app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()})
现在我们再来执行npm start启动项目，就会弹出一个如下图的窗口：
至此，说明我们的代码没有问题。
三、打包项目
1、修改.json文件，在里添加如下内容：
注：json文件不能有注释，请自己把后面的注释去除
"pack": "electron-builder --dir",// 暂时不知道用途，官方的配置"postinstall": "electron-builder install-app-deps",// 编译命令"build": "electron-builder",// 打包当前平台命令"build-win": "electron-builder --win --ia32",// 打包windows 32位应用命令"build-win64": "electron-builder --win --x64",// 打包windows 64位应用命令"build-mac": "electron-builder --mac",//打包mac平台应用命令"build-linux": "electron-builder --linux"// 打包Linux平台应用命令
完整的内容应为下图：
2、执行npm run 编译项目：
3、再执行npm run build打包（这里以当前平台为例）。
没有报错，说明我们打包成功。然后就发现多了一个dist文件夹，打开进去就是我们安装包的位置：