vue項目打包成桌面應用（.exe文件）

整理下項目打包盒子流程：
首先使用的插件：
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運行即可