Electron能帮助我们使用web技术快速地创建跨平台的桌面应用。本文记录了Electron的基础使用方法。

一、准备工作

1、执行npm init初始化项目
2、安装electronelectron-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命令
electron-demo.png
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

标签: Vue, Electron, fs.existsSync, __dirname, 报错

添加新评论