electron打包vue-cli项目为桌面程序（四）：使用electron打包vue项目

上一章讲了使用electron进行开发桌面应用，本章主要讲将开发的应用使用electron-packager插件打包

一：安装electron-packager，开发环境使用

cnpm install electron-packager --save-dev

二：在build文件夹下新建package.json文件，用于启动打包后的应用程序

内容为：

{
  "name": "studyelectron",
  "version": "1.0.0",
  "description": "studyelectron",
  "author": "ckx",
  "main": "electron/electron.js",
  "scripts": {
    "start": "electron"
  }
}

三：在build文件夹下创建electron.js

文件内容如下：

// 生产环境electron配置
// Modules to control application life and create native browser window
const {
  app,
  BrowserWindow,
  Menu
} = require('electron') // 引入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: process.env === 'development' ? 800 : 1200, // 初始宽度
    height: 800, // 初始高度
    minWidth: 1280, // 最小宽度
    minHeight: 800, // 最小高度
    webPreferences: {
      nodeIntegration: true, // 可以使用nodejs原生api
      preload: path.join(__dirname, 'electron-preload.js') // 创建桌面前引用的js文件，可以用来定义一些window全局变量
    }
  })

  // and load the index.html of the app.
  // mainWindow.loadFile('index.html')
  mainWindow.loadFile(path.join(__dirname, '../index.html')) // 桌面应用打开的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.

electron.js和electron_dev.js的区别只有 mainWindow.loadFile(path.join(__dirname, '../index.html'))，开发环境和打包后打开的页面路径不一样

四：修改build/webpack.prod.conf.js文件，将electron配置文件打包时复制到dist文件夹下。以防打包后，启动桌面程序时找不到启动配置文件

新增webpack打包配置如下：

new CopyWebpackPlugin([{
        from: path.resolve(__dirname, '../static'),
        to: config.build.assetsSubDirectory,
        ignore: ['.*']
      },
      // ----新增----将/build/electron.js文件复制到dist/electron目录下
      {
        from: path.resolve(__dirname, '../build/electron.js'),
        to: path.join(config.build.assetsSubDirectory, '../electron'),
      },
      // ----新增----将/build/electron-preload.js文件复制到dist/electron目录下
      {
        from: path.resolve(__dirname, '../build/electron-preload.js'),
        to: path.join(config.build.assetsSubDirectory, '../electron'),
      },
      // ----新增----将/build/package.json文件复制到dist目录下
      {
        from: path.resolve(__dirname, '../build/package.json'),
        to: ''
      }
    ])

四：修改根目录下的package.json文件，增加打包命令

"win64": "electron-packager ./dist/ studyelectron_win64 --out ./OutApp --platform=win32 --arch=x64 --overwrite",

先运行npm run dev 进行webpack打包

webpack打包后，再运行npm run win64，进行electron-packager打包

打包后的文件在根目录下的OutApp中，studyelectron_win64-win32-x64，该文件夹下有个exe文件studyelectron_win64.exe，双击打开

如图：

五：其他打包命令

windows 32位：electron-packager ./dist/ studyelectron_win32 --out ./OutApp --platform=win32 --arch=ia32 --overwrite

windows64位：electron-packager ./dist/ studyelectron_win64 --out ./OutApp --platform=win32 --arch=x64 --overwrite

mac系统：electron-packager ./dist/ studyelectron_mac --out ./OutApp --platform=darwin --arch=x64 --overwrite

linux系统：electron-packager ./dist/ studyelectron_linux --out ./OutApp --platform=linux --arch=x64 --overwrite

需要注意的是，我的系统是windows64位，只能打包出windows64位和linux包。不能打包出windows32位和mac包。查了下mac包必须在苹果系统才能打包出该类型包。windows32位有人说能打包出，有人说不行，需要windows32位系统才可以。这个需要大家尝试下。

本章只是打包出一个文件包，但不是安装包，在生产中，我们需要打包成桌面安装程序才可以。

下一章讲解window系统下打包成windows系统的桌面安装程序