一、新建umi项目

1. 新建文件夹 electron-umi
2. yarn create umi
3. yarn

二、配置electron，启动electron项目

1. 安装electron yarn add electron --dev
2. electron入口文件main.js，根目录下创建main.js

   const { BrowserWindow, app } = require('electron')
   let mainWindow;
   const createWindow = () => {
     mainWindow = new BrowserWindow({
       width: 800,
       height: 600,
     })
     mainWindow.loadURL('http://localhost:8000/')
   }
   
   app.on('ready', createWindow)
   

3. package.json

• npm script "electron-start": "electron main.js"，我们需要先启动我们的umi项目，再启动electron-start才能运行，下面将两个命令合并到一起
• 安装两个库yarn add wait-on concurrently --dev，然后修改npm script "electron-start": "concurrently \"umi dev\" \"wait-on http://localhost:8000 && electron main.js\""

三、打包 electron-builder

• 使用electron-builder进行打包 yarn add electron-builder --dev
• package.json 增加配置

"build": {
   "appId": "com.example.app",
   "directories":{
     "output": "dist" // 打包输出文件夹
   },
   "files": [
     "build/**/*" // 打包时使用的文件
   ]
 },

• 修改umi配置

  history: 'hash', //默认路由模式“browser”会导致本地静态文件加载问题
  publicPath: './', //问题同上，静态文件加载
  outputPath: 'build', // electron-builder已经使用了dist文件，所以改一个文件

• 修改main.js, 打包后加载本地文件

const { BrowserWindow, app } = require('electron')

const isProd = process.env.NODE_ENV !== 'development'

let mainWindow;

const createWindow = () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
  })

  if (isProd) {
    mainWindow.loadFile(`${__dirname}/index.html`)
  } else {
    mainWindow.loadURL('http://localhost:8000/')
  }
}

app.on('ready', createWindow)

• 根目录下新建public文件，将main.js放入public文件下。(因为main.js与其他模块无引用关系，webpack不会把它打包)
• 配置入口文件 "main": "build/main.js"，配置项目name、version，app会使用这个名字和版本打包
• 新增npm script

    "dist-win64": "yarn build && electron-builder --win --x64",

执行改脚本就可以打包了

打包需要下载electron相关文件，增加.npmrc文件配置镜像，助你下载成功

ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/
ELECTRON_BUILDER_BINARIES_MIRROR=http://npm.taobao.org/mirrors/electron-builder-binaries/

打包完成后的目录为

安装后，里面的核心文件是resource里面的app.asar文件，可以使用asar文件管理工具解包查看里面的内容，里面的内容其实就是

build文件就是我们umi打包的build文件

最终效果：