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