首页 > 【亲测可用】用Electron和electron-builder打包Vue项目为exe可执行文件安装包(不推荐,个人觉得没有VNISEdit和NW好用,而且有些

【亲测可用】用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项目了

更多相关:

  •     题意是求俩字符串的编辑距离,编辑定义有三种1、插入字符 2、删除字符 3、替换字符。 int minDistance(string word1, string word2) { if (word1.size() == 0) return (int)word2.size(); if (word2.size(...

  • jdt可以做语法树分析,并且支持visitor模式对代码进行分析。跟pmd的分析方式一样,我们只要实现 visitor接口即可实现一个插件。 @Service("requestMappingInfoService")public class RequestMappingInfoServiceImpl implements Reques...

  • 1.静态方法 static:通常在一个类中定义一个方法为static,那就是说,无需本类的对象即可调用此方法 声明为static的方法有以下几条限制: (1)它们仅能调用其他的static方法。  (2)它们只能访问static数据。 (3)它们不能以任何方式引用this 或super。 class Simple {static v...

  • 类的静态构造函数也叫类型构造器,静态构造器,他调用的时刻由CLR来控制:CLR会选择如下时间之一来调用静态构造函数:      1,在类型的第一个实例创建之前,或类型的非继承字段或成员第一次访问之前。这里的“之前”,代表前后衔接的意思。这里的时刻是精确的!      2,在非继承的静态字段或成员第一次访问之前的某个时刻,具体时刻不定!...

  • 2019独角兽企业重金招聘Python工程师标准>>> django的settings中包含三个static相关设置项: STATIC_ROOT STATIC_URL STATICFILES_DIRS STATIC_URL 好理解,就是映射到静态文件的url,一般为/static/ STATICFILES...