1、下载Electron
Electron中文官网地址：https://www.electronjs.org/zh/docs/latest/
Electron下载如果单纯使用npm的话，会出现n多问题
所以建议使用国内的淘宝镜像
npm config set registry https://registry.npmmirror.com/
然后下载
cnpm install --save-dev electron
下载完成后package.json文件出现以下依赖，成功
2、修改package.json文件
在package.json文件中增加一行
"homepage":"./",
否则打包之后的index.html文件打开为空白
3、打包react项目
运行命令
npm run build
项目中出现build文件夹
确定打包后的文件是否能够正常运行
全局安装 serve
npm i serve -g
然后运行build文件
serve build
4、使用vscode或其他工具打开build文件夹
将原来的项目关掉，使用其他工具打开刚刚生成的build文件夹
当然也可以选择不单独打开build文件夹，但是要把终端中的路径改为build下的
5、初始化项目
运行命令
npm init
会出现一些选项，按照自己的需求来填就行
其中
license这个选项windows用户填 MIT ，其他的系统要上网查
main 选项填 main.js
然后就会出现，package.json文件夹
6、创建main.js和preload.js文件
在build根目录创建这两个文件
main.js
const { app, BrowserWindow } = require('electron')
const path = require('path')
console.log("hello")
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
preload.js
window.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])
}
})
7、下载Forge 脚手架并进行设置
运行命令下载脚手架
cnpm install --save-dev @electron-forge/cli
进行设置
npx electron-forge import
但是，设置这一步基本都会出错，所以我们使用以下方式进行：
1、设置npm electron默认安装路径的环境变量
npm config set ELECTRON_MIRROR http://npmmirror.com/mirrors/electron/
2、修改package.json文件
{
"name": "electron-react",//用自己的
"version": "1.0.0",//用自己的
"description": "electron-test",//用自己的
"main": "main.js",//用自己的
"scripts": {
"start": "electron-forge start",//加上
"package": "electron-forge package",//加上
"make": "electron-forge make",//加上
"e-start": "electron ."//加上
},
"keywords": [
"123456"
],
"author": "gk",
"license": "MIT",
"devDependencies": {
"@electron-forge/cli": "^6.0.4",//版本号根据自己下载的electron-forge/cli版本号来，下面的版本号都跟这个相同
"@electron-forge/maker-deb": "^6.0.4",//版本号跟@electron-forge/cli同 加上
"@electron-forge/maker-rpm": "^6.0.4",//版本号跟@electron-forge/cli同 加上
"@electron-forge/maker-squirrel": "^6.0.4",//版本号跟@electron-forge/cli同 加上
"@electron-forge/maker-zip": "^6.0.4",//版本号跟@electron-forge/cli同 加上
"electron": "^22.0.0"//用自己的
},
"dependencies": {
"electron-squirrel-startup": "^1.0.0"//加上
},
//以下的全部加上
"config": {
"forge": {
"packagerConfig": {},
"makers": [
{
"name": "@electron-forge/maker-squirrel",
"config": {
"name": "electron_demo"
}
},
{
"name": "@electron-forge/maker-zip",
"platforms": [
"darwin"
]
},
{
"name": "@electron-forge/maker-deb",
"config": {}
},
{
"name": "@electron-forge/maker-rpm",
"config": {}
}
]
}
}
}
3、下载依赖
运行命令
cnpm install 或者 npm install
//npm install可能会下载失败
8、打包
运行命令
npm run make
这里会有点久，需要耐心等待
9、运行exe文件
在打包完成之后，会在build文件夹下生成out文件夹
打开out文件夹
运行exe文件，即可
