本文共 2449 字，大约阅读时间需要 8 分钟。

官方帮助文档 

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

会弹出类似这样的效果 

运行 

cnpm run electron_build

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

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

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

转载地址：http://bdxaf.baihongyu.com/