【亲测可用】用Electron和electron-builder打包Vue项目为exe可执行文件安装包（不推荐，个人觉得没有VNISEdit和NW好用，而且有些配置文件还挺脑残！）

官方帮助文档http://www.electronjs.org/docs 

有时候运行安装依赖包会很慢建议在(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/

 

运行

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

直到出现如下代码，就表示安装完毕 

在build/创建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', //软件的左上角图标webPreferences: { nodeIntegration: true }, //务必引入nodejs，否则你都无法运行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图标不得小于256像素x256像素）

    "scripts": {……"electron_dev": "electron .","electron_build": "electron-builder"},"main": "build/electron.js","build": {"appId": "com.shuzhiqiang.vue","productName": "强哥安装包名称","copyright": "强哥版权所有","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": "强哥的快捷方式"}},

运行

cnpm run build
cnpm run electron_dev

会弹出类似这样的效果 

运行 

cnpm run electron_build

如下图代表安装包生成完毕

找到install文件夹里面是这样的

安装好后桌面会有这个图标，点击就可以启动打开我们的Vue项目了

总结

以上是生活随笔为你收集整理的【亲测可用】用Electron和electron-builder打包Vue项目为exe可执行文件安装包（不推荐，个人觉得没有VNISEdit和NW好用，而且有些配置文件还挺脑残！）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。