vue項(xiàng)目使用electron進(jìn)行打包操作的全過程
更新時(shí)間：2023年03月17日 11:10:14 作者：春啊春
我們都知道Electron項(xiàng)目分為了主進(jìn)程和渲染進(jìn)程,主進(jìn)程其實(shí)就是我們的Electron,渲染進(jìn)程就相當(dāng)于我們的Vue項(xiàng)目,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目使用electron進(jìn)行打包操作的全過程,需要的朋友可以參考下
一、設(shè)置國內(nèi)鏡像
npm config edit
執(zhí)行后會(huì)彈出npm的配置文檔，將以下類容復(fù)制到文件末尾。
electron_mirror=https://npm.taobao.org/mirrors/electron/ electron-builder-binaries_mirror=https://npm.taobao.org/mirrors/electron-builder-binaries/
二、創(chuàng)建vue框架文件
這里不詳細(xì)說了，就是創(chuàng)建一個(gè)vue項(xiàng)目，如果已有項(xiàng)目則跳過這一步。
三、到vue項(xiàng)目的目錄里面安裝electron
Electron安裝命令
npm install electron -g
Vue項(xiàng)目添加Electron-builder打包工具
vue add electron-builder
四、做好以上步驟后就可以測試打包了
npm run serve 網(wǎng)頁運(yùn)行
npm run electron:serve 網(wǎng)頁運(yùn)行并打開客戶端運(yùn)行
npm run electron:build 構(gòu)建打包客戶端-會(huì)在根目錄生成dist_electron文件夾
其中的XXX Setup XXX.exe就是安裝包
需要打包別的平臺(tái)，macOS,Linux等，去electron官網(wǎng)看看就知道了，簡單的五、其他配置
修改logo圖片配置打包信息：注意：是vue.config.js文件，不是package.js
根目錄下 vue.config.js文件
使用時(shí)候請去掉里面的注釋，不然跑不起來。
我下面引入的圖片里面有一個(gè)build/logo.ico的文件，這個(gè)文件大小必須是256*256的
然后這個(gè)build的目錄在項(xiàng)目根目錄下創(chuàng)建，圖片放進(jìn)去就行
module.exports = {
pluginOptions: {
electronBuilder: {
builderOptions: {
nsis: {
allowToChangeInstallationDirectory: true,
oneClick: false,
installerIcon: "./build/logo.ico", //安裝logo
installerHeaderIcon: "./build/logo.ico" //安裝logo
},
electronDownload: {
mirror: "https://npm.taobao.org/mirrors/electron/" //鏡像設(shè)置
},
win: {
icon: './build/logo.ico' //打包windows版本的logo
},
productName: "應(yīng)用名稱", //應(yīng)用的名稱
}
}
},
}我再放一份electron-builder的配置文件，對(duì)比下上下兩個(gè)代碼就知道里面怎么配置了
"build": {
"productName":"xxxx", //項(xiàng)目名 這也是生成的exe文件的前綴名
"appId": "com.xxx.xxxxx", //包名
"copyright":"xxxx", //版權(quán)信息
"directories": { //輸出文件夾
"output": "build"
},
"nsis": { //nsis相關(guān)配置，打包方式為nsis時(shí)生效
"oneClick": false, // 是否一鍵安裝
"allowElevation": true, // 允許請求提升，如果為false，則用戶必須使用提升的權(quán)限重新啟動(dòng)安裝程序。
"allowToChangeInstallationDirectory": true, // 允許修改安裝目錄
"installerIcon": "./build/icons/aaa.ico", // 安裝圖標(biāo)
"uninstallerIcon": "./build/icons/bbb.ico", //卸載圖標(biāo)
"installerHeaderIcon": "./build/icons/aaa.ico", // 安裝時(shí)頭部圖標(biāo)
"createDesktopShortcut": true, // 創(chuàng)建桌面圖標(biāo)
"createStartMenuShortcut": true, // 創(chuàng)建開始菜單圖標(biāo)
"shortcutName": "xxxx", // 圖標(biāo)名稱
"include": "build/script/installer.nsh", // 包含的自定義nsis腳本
},
"publish": [
{
"provider": "generic", // 服務(wù)器提供商，也可以是GitHub等等
"url": "http://xxxxx/" // 服務(wù)器地址
}
],
"win": {
"icon": "build/icons/aims.ico",
"target": [
{
"target": "nsis", //使用nsis打成安裝包，"portable"打包成免安裝版
"arch": [
"ia32", //32位
"x64" //64位
]
}
]
},
"mac": {
"icon": "build/icons/icon.icns"
},
"linux": {
"icon": "build/icons"
}
}隱藏菜單欄目：根目錄下src/background.js文件，找到app.on方法 (按照步驟來做，會(huì)生成這個(gè)文件的)
app.on('ready', async () => {
//這里注釋掉，沒啥用
// if (isDevelopment && !process.env.IS_TEST) {
// // Install Vue Devtools
// try {
// await installExtension(VUEJS_DEVTOOLS)
// } catch (e) {
// console.error('Vue Devtools failed to install:', e.toString())
// }
// }
createWindow()
// 隱藏菜單欄
const {
Menu
} = require('electron');
Menu.setApplicationMenu(null);
// hide menu for Mac
if (process.platform !== 'darwin') {
app.dock.hide();
}
})設(shè)定寬高也在這個(gè)文件里面
const win = new BrowserWindow({
width: 1000,
height: 800,
title: '標(biāo)題',
webPreferences: {
// Use pluginOptions.nodeIntegration, leave this alone
// See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION
}
})一堆堆操作后，你就能夠得到一個(gè)有自己圖標(biāo)并且沒有菜單欄的exe文件以及安裝包和文件。
運(yùn)行后就像下面這個(gè)樣子
附：electron打包設(shè)置可以選擇安裝目錄
1.編輯package.json文件
2.找到"build": 節(jié)點(diǎn)，新增nsis
具體代碼：
"nsis":{
"oneClick" : false,
"allowToChangeInstallationDirectory" : true
},總結(jié)
到此這篇關(guān)于vue項(xiàng)目使用electron進(jìn)行打包操作的文章就介紹到這了,更多相關(guān)vue使用electron打包內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- vue配置electron使用electron-builder進(jìn)行打包的操作方法
- vue3使用Electron打包成exe的方法與打包報(bào)錯(cuò)解決
- 使用electron打包Vue前端項(xiàng)目的詳細(xì)流程
- 如何使用electron將vue項(xiàng)目打包成.exe文件(保姆級(jí)教程)
- 解決electron打包vue-element-admin項(xiàng)目頁面無法跳轉(zhuǎn)的問題小結(jié)
- 手把手教你使用electron將vue項(xiàng)目打包成exe
- 關(guān)于electron-vue打包后運(yùn)行白屏的解決方案
- vue項(xiàng)目打包成桌面快捷方式(electron)的方法
- 用electron打包vue項(xiàng)目中的報(bào)錯(cuò)問題及解決
- vue 項(xiàng)目集成 electron 和 electron 打包及環(huán)境配置方法
相關(guān)文章
vue3實(shí)現(xiàn)搜索項(xiàng)超過n行就折疊的思路詳解
我們在做列表查詢的時(shí)候，會(huì)有很多查詢項(xiàng)，如何實(shí)現(xiàn)超過n行查詢項(xiàng)的時(shí)候自動(dòng)折疊起來呢？本文給大家分享vue3實(shí)現(xiàn)搜索項(xiàng)超過n行就折疊的思路詳解，感興趣的朋友一起看看吧2022-06-06
這篇文章主要介紹了vue.js中修飾符.stop的用法解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了 Vue.js對(duì)象轉(zhuǎn)換的相關(guān)資料，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2017-06-06
Web應(yīng)用程序中資源分頁不僅對(duì)性能很有幫助，而且從用戶體驗(yàn)的角度來說也是非常有用的。在這篇文章中，將了解如何使用Vue創(chuàng)建動(dòng)態(tài)和可用的分頁組件2022-12-12
這篇文章主要介紹了Vue Socket.io源碼解讀，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要為大家詳細(xì)介紹了vue.js表格分頁示例，ajax異步加載數(shù)據(jù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
Vue3動(dòng)態(tài)組件component不生效問題解決方法
動(dòng)態(tài)組件component是Vue中非常實(shí)用的一個(gè)功能,它可以根據(jù)條件動(dòng)態(tài)切換不同的組件,在Vue3中使用方法和Vue2基本一致,在vue3使用component動(dòng)態(tài)組件展示組件時(shí),組件就是不展示顯示空白,所以本文記錄了Vue3動(dòng)態(tài)組件component不生效問題解決方法,需要的朋友可以參考下2024-08-08
vue源碼中的makeMap用在很多地方，主要是判斷標(biāo)簽是原生標(biāo)簽還是用戶自定義的組件，但是標(biāo)簽很多，如果每判斷一次都執(zhí)行一次循環(huán)，累計(jì)下來，性能損耗還是很大的，makeMap就是解決這個(gè)問題出現(xiàn)的2022-08-08
這篇文章主要介紹了vue中的cookies緩存存值方式，超簡單！具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了cdn模式下vue的基本用法，本文通過圖文并茂的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-10-10