vue项目中添加electron的详细代码

在Vue项目中添加Electron的过程如下所述：

安装Electron相关依赖
需要安装Electron相关依赖，可以在终端或命令行中运行以下命令：

npm install --save-dev electron

在Vue项目中添加Electron相关文件
在Vue项目的根目录下，需要添加一个名为“main.js”的文件，其中包含启动Electron的必要配置。

代码示例：

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

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  win.loadFile('index.html')
  win.webContents.openDevTools()
}

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

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

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

除了“main.js”文件之外，还需要在Vue项目的根目录下创建“electron.js”文件，其中包含启动和打包Electron的配置。

代码示例：

process.env.NODE_ENV = 'production'

const { spawn } = require('child_process')
const { join } = require('path')
const { existsSync } = require('fs')
const { app, BrowserWindow, Menu } = require('electron')
const { autoUpdater } = require('electron-updater')

autoUpdater.autoDownload = false

 function createWindow () {
  const win = new BrowserWindow({
    width: 1000,
    height: 700,
    webPreferences: {
      nodeIntegration: true,
      webSecurity: false
    }
  })

  win.loadURL(`file://${join(__dirname, '..', 'dist', 'index.html')}`)
  win.on('closed', () => {
    win = null
  })

  const menu = Menu.buildFromTemplate([
    {
      label: 'Menu',
      submenu: [
        { label: 'Adjust Notification Value' },
        { label: 'CoinMarketCap' },
        { label: 'Exit' }
      ]
    },
    {
      label: 'Info'
    }
  ])

  Menu.setApplicationMenu(menu)

  if (existsSync(join(__dirname, 'dev-app-update.yml'))) {
    autoUpdater.updateConfigPath = join(__dirname, 'dev-app-update.yml')
  }

  autoUpdater.checkForUpdates()

  return win
}

app.on('ready', async () => {
  const mainWindow = await createWindow()
})

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

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

autoUpdater.on('update-downloaded', () => {
  autoUpdater.quitAndInstall()
})

app.on('certificate-error', (event, webContents, url, error, certificate, callback) => {
  event.preventDefault()

  callback(true)
})

app.on('login', (event, webContents, details, authInfo, callback) => {
  event.preventDefault()

  callback(null, 'username', 'password')
})

app.on('ready', () => {
  spawn('npm', ['run', 'serve'], {
    shell: true,
    env: process.env,
    stdio: 'inherit',
    cwd: join(__dirname, '..')
  })
})

修改package.json文件
需要在package.json文件中添加以下代码：

"scripts": {
  "electron": "vue-cli-service electron:serve",
  "electron-build": "vue-cli-service electron:build"
},
"build": {
  "electronVersion": "9.0.0",
  "builder": {
    "mac": {
      "extendInfo": {
        "NSCalendarsUsageDescription": "We need access to the calendar to remind you of certain events."
      }
    }
  },
  "productName": "My App"
}

其中，“electron”命令用于启动Vue项目中的Electron，在终端或命令行中可以运行以下命令：