整理下项目打包盒子流程：
首先使用的插件：
electronjs官网
electron Git

1.首先先从git库里面克隆下electron的例子（后面会用到）

git clone https://github.com/electron/electron-quick-start
npm install  （建议cnpm比较快）
npm start

electronjs

{
  "name": "electron-quick-start",
  "version": "1.0.0",
  "description": "A minimal Electron application",
  "main": "main.js",  //项目入口函数
  "scripts": {
    "start": "electron ."
  },
  "repository": "https://github.com/electron/electron-quick-start",
  "keywords": [
    "Electron",
    "quick",
    "start",
    "tutorial",
    "demo"
  ],
  "author": "GitHub",
  "license": "CC0-1.0",
  "devDependencies": {
    "electron": "^9.0.4"
  }
}

main.js

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

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // and load the index.html of the app.
  mainWindow.loadFile('index.html')  //入口文件

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

// 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.whenReady().then(() => {
  createWindow()
  
  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 (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

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

// 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.

2.vue项目中直接安装：

npm install electron --save-dev
npm install electron-packager --save-dev

electron-packager是打成exe文件的插件。

步骤1.
在build文件添加electron.js(git上clone下来的main.js,名字改下)

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

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // and load the index.html of the app.
  mainWindow.loadFile('../dist/index.html')  //这是设置入口文件

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

步骤2.
更改config/index.js中生产模式下（build）的assetsPublicPth, 原本为 /, 改为 ./

build: {
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',         //修改的文件位置
    ....
}

步骤3.
项目的package.json中增加指令

"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",
    "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
    "build": "node build/build.js",
    "electron_dev": "npm run build && electron build/electron.js",  //增加这条可查看效果
  },

先用npm run build 打包，npm run electron_dev可以查看效果

步骤4.
项目打包成.exe文件
把build目录下的electron.js复制到vue打的包dist文件下，更改下入口文件路径（此时和dist文件是同级的）
然后把项目的package.json复制到相同dist文件下
（这两个不引入会出现报错，打包失败，原因是通过package.json找入口文件）

最后再pageage.json加上一条打包指令

 "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",
    "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
    "build": "node build/build.js",
    "electron_dev": "npm run build && electron build/electron.js",
    "electron_build": "electron-packager ./dist MYAPP --platform=win32 --arch=x64 --icon=./src/assets/home.ico --overwrite" //这条就是最终打包成.exe文件指令
  },

MYAPP就是项目名，可以根据项目具体情况修改
icon我直接放在assets下面（home.icon）
执行npm run electron_build，可以看到项目目录中多了一个MYAPP -win32-x64文件，找到里面的MYAPP .exe运行即可