electron将vue项目打包成exe桌面应用流程及可能出现的问题

近期项目需求，把网页（基于vue）打包成exe桌面应用，在网上找到了electron；
这里说说我对electron-builder的使用心得
electron打包exe程序主要有两种方法：
1、electron-packager：初学者入门demo传送门
2、electron-builder：稍微复杂一丢丢，需要配置文件
#######
先将vue项目打包 npm run build 得到dist文件夹（我这里是web文件夹）
build文件夹下添加文件 electron.js

electron.js

// Modules to control application life and create native browser window
const {app, BrowserWindow, Menu  } = require('electron')
const path = require('path')

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow

function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    // width: 1920,
    // height: 1000,
    show: false,
    webPreferences: {
      nodeIntegration:true,
      preload: path.join(__dirname, '../web/preload.js')
    }
  })
  // 默认全屏
  mainWindow.maximize()
  mainWindow.show()
  // and load the index.html of the app.
  // 要加载的页面，打包后的web/index.html
  mainWindow.loadFile('../web/index.html')

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()

  // Emitted when the window is closed.
  mainWindow.on('closed', function () {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null
  })
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', function () {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') app.quit()
})

app.on('activate', function () {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (mainWindow === null) createWindow()
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

修改vue项目的package.json文件，添加electron-builder打包的配置

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "build": "node build/build.js",
    "electron_dev": "npm run build && electron build/electron.js",
    "electron_build": "electron-builder"
  },
"build": {
    "productName": "exe的前缀名",
    "appId": "com.example.yourId",
    "directories": {
      "output": "./my-project" // 打包后输出的文件夹,exe程序就在这里面
    },
    "files": [
      "./**/*"
    ],
    "win": {
      "icon": "favicon.ico", // 桌面图标
      "target": [
        {
          "target": "nsis",
          "arch": [
            "ia32",
            "x64"
          ]
        }
      ]
    },
    "nsis": {
      "oneClick": false,
      "perMachine": true,
      "allowElevation": true,
      "allowToChangeInstallationDirectory": true,
      "createDesktopShortcut": true,
      "runAfterFinish": true,
      "shortcutName": "打包后的桌面显示名称",
      "installerIcon": "favicon.ico", // 图标
      "uninstallerIcon": "favicon.ico"
    }
  },

添加electron-builder打包的入口配置

"main": "./web/main.js", // 指向web目录下的main.js

然后将package.json文件copy一份到web（即dist）目录下

修改web/package.json文件

"main": "main.js", // 改成当前目录

在把build目录下的electron.jscopy一份到web下
修改路径

mainWindow.loadFile('./index.html') // 当前文件夹

运行 electron-builder 命令就可以打包exe程序啦


可能出现问题（坑）
首次打包可能各种依赖包下不下来而报错，因为是*的资源
最简单粗暴的方法就是离线将需要的依赖包下载下来放到对应的文件夹下


打包之后打开程序，白屏问题
修改两处地方：
1、config/index.js
/ 改成 ./

2、build/electron.js
将mainWindow.loadFile(’…/web/index.html’)这行代码换成

mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, '../web/index.html'),
    protocol: 'file:',
    slashes: true
  }))

var url = require(‘url’)

web目录下的main.js同改

到这里electron打包基本就完成了