官方幫助文檔http://www.electronjs.org/docs?

有時(shí)候運(yùn)行安裝依賴包會(huì)很慢建議在(c)npm config edit之后彈出的.(c)npmrc記事本里面加入

electron_mirror=https://npm.taobao.org/mirrors/electron/
electron-builder-binaries_mirror=https://npm.taobao.org/mirrors/electron-builder-binaries/

?

運(yùn)行

cnpm i electron -D & cnpm i electron-builder -D

直到出現(xiàn)如下代碼，就表示安裝完畢?

在build/創(chuàng)建electron.js

?

const { app, BrowserWindow, Menu } = require('electron'), path = require('path');const createWindow = () => {Menu.setApplicationMenu(null); // 隱藏菜單欄const mainWindow = new BrowserWindow({width: 1200,height: 800,minWidth: 1200,minHeight: 800,icon: './dist/static/favicon.ico', //軟件的左上角圖標(biāo)webPreferences: { nodeIntegration: true }, //務(wù)必引入nodejs，否則你都無(wú)法運(yùn)行Vue})// mainWindow.loadFile(path.join('file://', __dirname, '/dist/index.html'));mainWindow.loadURL('http://www.s-zq.com');
}app.whenReady().then(() => {createWindow();app.on('activate', () => (BrowserWindow.getAllWindows().length === 0) && createWindow());})app.on('window-all-closed', () => (process.platform !== 'darwin') && app.quit());

在package.json的scripts:{}里面以及scripts:{}后面加入 部分配置代碼（其中win、mac、linux的icon圖標(biāo)不得小于256像素x256像素）

    "scripts": {……"electron_dev": "electron .","electron_build": "electron-builder"},"main": "build/electron.js","build": {"appId": "com.shuzhiqiang.vue","productName": "強(qiáng)哥安裝包名稱","copyright": "強(qiáng)哥版權(quán)所有","asar": false,"files": ["dist/**/*", "build/electron.js"],"directories": { "output": "install" },"win": {"icon": "./dist/static/favicon.png","target": [{ "target": "nsis", "arch": ["ia32", "x64"] }]},"mac": {"icon": "./dist/static/favicon.png"},"linux": {"icon": "./dist/static/favicon.png"},"nsis": {"oneClick": false,"allowElevation": true,"allowToChangeInstallationDirectory": true,"installerIcon": "./dist/static/favicon.ico","uninstallerIcon": "./dist/static/favicon.ico","installerHeaderIcon": "./dist/static/favicon.ico","createDesktopShortcut": true,"createStartMenuShortcut": true,"shortcutName": "強(qiáng)哥的快捷方式"}},

運(yùn)行

cnpm run build
cnpm run electron_dev

會(huì)彈出類似這樣的效果?

運(yùn)行?

cnpm run electron_build

如下圖代表安裝包生成完畢

找到install文件夾里面是這樣的

安裝好后桌面會(huì)有這個(gè)圖標(biāo)，點(diǎn)擊就可以啟動(dòng)打開我們的Vue項(xiàng)目了

總結(jié)

以上是生活随笔為你收集整理的【亲测可用】用Electron和electron-builder打包Vue项目为exe可执行文件安装包（不推荐，个人觉得没有VNISEdit和NW好用，而且有些配置文件还挺脑残！）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。