我有個模版專案是用vue-cli3.x開發的，測試部署已經沒問題，突發奇想，能不能打包成exe檔案，在桌面執行，開始鼓搗。

1.先將專案打包

yarn build

2.安裝electron和electron-packager

yarn add electronyarn add electron-packager

3.dist目錄新建main.js檔案，內容如下：

const { app, BrowserWindow, Menu} = require('electron')function createWindow() { // 去掉選單 Menu.setApplicationMenu(null) // 建立瀏覽器視窗 const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) // 並且為你的應用載入index.html win.loadFile('index.html') // 開啟開發者工具 // win.webContents.openDevTools()}// Electron會在初始化完成並且準備好建立瀏覽器視窗時呼叫這個方法// 部分 API 在 ready 事件觸發後才能使用。app.whenReady().then(createWindow)//當所有視窗都被關閉後退出app.on('window-all-closed', () => { // 在 macOS 上，除非使用者用 Cmd + Q 確定地退出， // 否則絕大部分應用及其選單欄會保持啟用。 if (process.platform !== 'darwin') { app.quit() }})app.on('activate', () => { // 在macOS上，當單擊dock圖示並且沒有其他視窗開啟時， // 通常在應用程式中重新建立一個視窗。 if (BrowserWindow.getAllWindows().length === 0) { createWindow() }})// 您可以把應用程式其他的流程寫在在此檔案中// 程式碼 也可以拆分成幾個檔案，然後用 require 匯入。

注：可以從electron官網clone例子，複製main.js

4.dist目錄新建package.json檔案，內容如下：

{ "name": "electron-quick-start", "version": "1.0.0", "description": "A minimal Electron application", "main": "main.js", "scripts": { "start": "electron .", "package": "electron-packager . HelloWorld --platform=win32 --arch=x64 --icon=computer.ico --out=./out --asar --app-version=0.0.1 --overwrite --ignore=node_modules" }, "repository": "https://github.com/electron/electron-quick-start", "keywords": [ "Electron", "quick", "start", "tutorial", "demo" ], "author": "GitHub", "license": "CC0-1.0", "devDependencies": { "electron": "^9.0.0" }, "dependencies": { "electron-packager": "^14.2.1" }}

注：可以從electron官網clone例子，複製package.json

5.在專案的根目錄的package.json增加一條啟動命令

"scripts": { "serve": "vue-cli-service serve --copy", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "electron_dev": "yarn build && electron main.js", "electron_build": "electron-packager ./dist helloworld --platform=win32 --arch=x64 --overwrite" },

注：

sourcedir: 資源(dist/package.json)路徑，在本例中既是./dist/appname:打包出的exe名稱,這裡取名為helloworldplatform :平臺名稱（windows是win32）arch: 版本，本例為x64

6.生成exe

yarn electron_build

可以看到專案目錄中多了一個helloworld-win32-x64檔案，找到裡面的helloworld.exe執行即可。

執行效果