將vue項目打包成windows可執行程序

1、準備好dist將整個項目打包

npm run build

2、安裝electron依賴

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

"electron": "^13.1.4",
"electron-packager": "^15.2.0"

在dist文件夾下面創建electron.js
electron.js內容如下：

const electron = require('electron')
const path = require('path')
const app = electron.app
const BrowserWindow = electron.BrowserWindow
const globalShortcut = electron.globalShortcut //快捷鍵let mainWindow
const Menu = electron.Menufunction createWindow () {Menu.setApplicationMenu(null)// Create the browser window.mainWindow = new BrowserWindow({width: 980,height: 640})// and load the index.html of the app.mainWindow.loadFile('index.html')// Open the DevTools.// mainWindow.webContents.openDevTools()// Emitted when the window is closed.mainWindow.on('closed', function () {mainWindow = null})// 通過快捷鍵就可以打開調試模式 ctrl + shift + lglobalShortcut.register('CommandOrControl+Shift+L', () => {let focusWin = BrowserWindow.getFocusedWindow()focusWin && focusWin.toggleDevTools()})
}app.on('ready', createWindow)// Quit when all windows are closed.
app.on('window-all-closed', function () {if (process.platform !== 'darwin') app.quit()
})app.on('activate', function () {if (mainWindow === null) createWindow()
})

在dist文件夾下面添加package.json文件內容如下：

{"name": "china_new1","version": "2.0.0","description": "A minimal Electron application","main": "electron.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": "^6.0.12"}}

整個文件夾格式如下：

在跟目錄添加命令

"electron_build": "electron-packager ./dist --platform=win32 --arch=x64 --overwrite"

執行打包命令

cnpm run electron_build

等待打包結果，打包出來為一下截圖即為打包成功，雙擊china_new1.exe運行項目。