官方文档

结构

1
2
3
4
5
my-electron-app/
├── package.json
├── main.js
├── preload.js
└── index.html
  1. 安装 Electron

    1
    2
    3
    mkdir my-electron-app && cd my-electron-app
    npm init -y
    npm i --save-dev electron
  2. 创建主脚本文件 main.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    const { app, BrowserWindow } = require('electron')
    const path = require('path')

    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()
    }
    })
  3. 创建 index.html 文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
    </head>
    <body style="background: white;">
    <h1>Hello World!</h1>
    <p>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.
    </p>
    </body>
    </html>
  4. 预加载脚本(在本例中是preload.js 文件)充当Node.js 和您的网页之间的桥梁

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    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])
    }
    })
  5. 修改 package.json

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    {
    "name": "my-electron-app",
    "version": "0.1.0",
    "author": "your name",
    "description": "My Electron app",
    "main": "main.js",
    "scripts": {
    "start": "electron ."
    }
    }

常见问题

  1. Cannot find wine64 despite wine-stable installed via homebrew
    1
    brew install homebrew/cask-versions/wine-devel

如执行以上命令报错,可先更新 brew 再次尝试

1
brew update




第一步:把electron的官方例子扒下来,下面简称A,留着待用:

git clone https://github.com/electron/electron-quick-start
第二步:进入我们自己的项目(下面简称B),修改公共路径为相对路径(很多同学都是这步出了问题,导致 npm run build 后出现白屏情况):

如果你是 vue-cli3 构建的项目:
执行下列指令,打开vue-cli图形配置界面,选择配置,修改公共路径为 ./ , 保存即可:

vue ui

或者你可以点击上图中右上角的 打开 vue 配置, 或者在项目的根目录中创建 vue.config.js, 设置以下内容:

module.exports = {
lintOnSave: undefined,
publicPath: ‘./‘,
outputDir: undefined,
assetsDir: undefined,
runtimeCompiler: undefined,
productionSourceMap: undefined,
parallel: undefined,
css: undefined
}
如果你是vue-cli2 或者 webpack 创建的项目:
进入config文件夹下的 index.js ,将其中的 assetsPublicPath 修改为相对路径 ./ ,保存即可:

第三步:打包你的项目,我相信这步你已经轻车熟路了~,将打包出来的 dist 文件夹复制到之前下载的A文件夹中

npm run build
第四步:进入刚才下载的A项目,删除项目根目录下的 index.html 文件。

第五步:在A项目中找到入口文件 main.js ,修改打包的文件路径为我们的index.html:

// main.js 原始内容
mainWindow.loadFile(‘index.html’)
// 修改后的内容
mainWindow.loadFile(‘./dist/index.html’)
第六步:在A项目中检查 package.json 的命令,正常情况下,运行下列指令即可进行打包效果预览:

// 国内网络下载electron可能很慢,建议设置
// npm config set registry https://registry.npm.taobao.org/
// npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/

npm install
npm run start
打包成功以后就会出来一个桌面应用,如果一切正常的话你已经可以看到自己的项目了,如果出现白屏的情况,请返回查看第二步~

第七步:在A项目中,下载打包需要的依赖 electron-packager

npm install electron-packager –save-dev
第八步:在A项目中,进入 package.json ,在 scripts 中添加 packager 指令,如下所示:

“scripts”: {
“start”: “electron .”,
“packager”: “electron-packager ./ App –platform=win32 –arch=x64 –overwrite”//此处为添加命令
}
如果你想修改最后打包出来的exe文件图标,类似于favicon,或者EXE的名字,可以设置 packager 的指令内容为,icon的路径自己调整下哦,更多配置内容请查阅文档哈:

“packager”: “electron-packager ./ YOUR_APP_NAME –platform=win32 –arch=x64 –icon=./dist/favicon.ico –overwrite”
第九步:运行命令打包,然后项目中会出现一个 App-win32-x64 的文件夹,这个文件就是打包好的桌面应用,文件夹里有一个 App.exe 文件,App.exe就是这个项目的启动文件:

npm run packager