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

原创

挚爱的强哥 2020-08-06 12:43:56 ©著作权

©著作权归作者所有：来自51CTO博客作者挚爱的强哥的原创作品，请联系作者获取转载授权，否则将追究法律责任

官方帮助文档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/

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

运行

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

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

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

在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": "强哥的快捷方式"
        }
    },