【亲测可用】用Electron和electron-builder打包Vue项目为exe可执行文件安装包(不推荐,个人觉得没有VNISEdit和NW好用,而且有些配置文件还挺脑残!)
生活随笔
收集整理的這篇文章主要介紹了
【亲测可用】用Electron和electron-builder打包Vue项目为exe可执行文件安装包(不推荐,个人觉得没有VNISEdit和NW好用,而且有些配置文件还挺脑残!)
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
官方幫助文檔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)題。
- 上一篇: Node.js实现本地客户端上传单个或者
- 下一篇: 【敏捷开发】Node.js(nodejs