Electron的基础使用
Electron能帮助我们使用web技术快速地创建桌面应用。本文记录了Electron的基础使用方法。
一、准备工作
1、执行npm init初始化项目
2、安装electron、electron-builder
npm install --save-dev electron electron-builder二、搭建项目
1、创建index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
测试文档
</body>
</html>2、创建index.js文件
const {app, BrowserWindow} = require("electron")
function createWindow() {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
})
mainWindow.loadFile("index.html")
}
app.on("ready", () => {
createWindow()
})
app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
app.quit()
}
})
app.on("activate", () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})3、运行
编辑package.json，在scripts节点中新增
"serve": "electron ."然后执行npm run serve命令
4、打包
编辑package.json，在scripts节点中新增
"build": "electron-builder --win --ia32"执行npm run build命令开始打包。
这里打包的是win32的应用程序，electron-builder的其他参数可以去查官方文档。
三、 可能会碰到的问题
1. Vue项目中报错TypeError: fs.existsSync is not a function
解决方法1：
使用window.require代替require
// let { ipcRenderer } = require("electron");
let { ipcRenderer } = window.require("electron");解决方法2：
在vue.config.js中配置webpack的target属性为electron-renderer
module.exports = {
configureWebpack: (config) => {
config.target = 'electron-renderer';
}
}使用import报错同样适用方法2