vue项目使用electron进行打包操作的全过程

以下是vue项目使用electron进行打包操作的全过程：

步骤一：创建vue项目

首先，我们需要先创建一个vue项目。可以使用vue-cli快速搭建一个工程：

npm install -g vue-cli
vue init webpack my-vue-project

步骤二：添加 electron

接下来我们需要添加 electron。这里使用的是 electron-builder 进行打包：

npm install --save-dev electron-builder

此外还要在package.json中添加以下字段：

"main": "dist/electron/main.js",
"scripts": {
  "electron:build": "electron-builder"
}

接下来需要在根目录创建electronBuilder.js文件，在其中的配置进行相关设置。可以参考以下示例：

module.exports = {
  // electron-builder配置
  builderOptions: {
    "appId": "com.example.app",
    "productName": "My App",
    "publish": [{
      "provider": "generic",
      "url": "http://example.com/app/releases/"
    }],
    "mac": {
      "category": "public.app-category.developer-tools",
      "target": "dmg"
    },
    "dmg": {
      "background": "build/background.tiff",
      "icon": "build/icon.icns",
      "title": "My App"
    },
    "win": {
      "target": "nsis",
      "icon": "build/icon.ico"
    },
    "nsis": {
      "allowToChangeInstallationDirectory": true
    }
  }
}

步骤三：创建 Electron 入口文件

接下来在项目根目录创建一个文件夹 electron，并在其中创建 main.js作为 electron 入口文件。

以下是一个简单的 main.js示例：

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

function createWindow () {
  // 创建浏览器窗口
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // 加载index.html文件
  win.loadFile('dist/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()
  }
})

步骤四：进行打包操作

最后，使用以下命令进行打包操作：

npm run electron:build

打包完成后可以在 dist_electron 文件夹中找到相关的打包文件。

示例一：在 main.js 中添加自定义菜单

// 自定义菜单
const template = [
  {
    label: '文件',
    submenu: [
      {
        label: '退出',
        accelerator: 'Command+Q',
        click: function () {
          app.quit()
        }
      }
    ]
  },
  {
    label: '编辑',
    submenu: [
      {
        label: '撤销',
        accelerator: 'CmdOrCtrl+Z',
        selector: 'undo:'
      },
      {
        label: '恢复',
        accelerator: 'Shift+CmdOrCtrl+Z',
        selector: 'redo:'
      },
      {
        type: 'separator'
      },
      {
        label: '剪切',
        accelerator: 'CmdOrCtrl+X',
        selector: 'cut:'
      },
      {
        label: '复制',
        accelerator: 'CmdOrCtrl+C',
        selector: 'copy:'
      },
      {
        label: '粘贴',
        accelerator: 'CmdOrCtrl+V',
        selector: 'paste:'
      },
      {
        label: '全选',
        accelerator: 'CmdOrCtrl+A',
        selector: 'selectAll:'
      }
    ]
  }
]

const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)

示例二：使用 node-pty 将命令行程序运行在 electron 中

npm i node-pty

const {app, BrowserWindow } = require('electron')
const path = require('path')
const os = require('os')
const { spawn } = require('node-pty')

let win

function createWindow () {
  // 创建浏览器窗口
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // 加载index.html文件
  win.loadFile('dist/index.html')

  // 运行终端程序
  const ptyProcess = spawn(os.platform() === 'win32' ? 'cmd.exe' : 'bash', [], {
    cwd: process.env.HOME,
    env: process.env
  })

  ptyProcess.on('data', function(data) {
    win.webContents.send('term-data', data)
  })
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

以上就是使用 electron 进行打包操作的全过程，同时提供了两个例子来进行说明。