vue配置electron使用electron-builder進行打包的操作方法
更新時間：2024年08月06日 10:27:50 作者：LUNA~
這篇文章主要介紹了vue配置electron使用electron-builder進行打包的操作方法,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧
1. 已知：vue3項目已經(jīng)創(chuàng)建好
1.1 安裝依賴（npm i） ;運行項目（npm run dev），確保項目是好的。
1.2. 打包本地Vue項目（npm run build）
打包好后會自動形成dist 文件夾
一、配置Electron
1. 安裝electron
cnpm install --save-dev electron
安裝好后，package.json 中會加載electron 及其版本號
配置 ?????vite.config.js文件
ps：在配置vite.config.js文件之后可以進行打包本地項目。
2. 在根目錄創(chuàng)建electron 文件夾，并新建main.js 和preload.js
main.js :
const { app, BrowserWindow } = require('electron')
const path = require('path')
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600,
// 將此腳本(preload)附加到渲染器流程
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
nodeIntegration: true, //開啟true這一步很重要,目的是為了vue文件中可以引入node和electron相關的API
contextIsolation: true, // 可以使用require方法
enableRemoteModule: true, // 可以使用remote方法
}
})
//也開頁面
win.loadURL('http://localhost:3001')
//控制臺
win.webContents.openDevTools()
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})preload.js
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const dependency of ['chrome', 'node', 'electron']) {
replaceText(`${dependency}-version`, process.versions[dependency])
}
})3.在package.json 中配置添加以下代碼：
{
"name": "vue3_cli_default",
"version": "1.0.0",
"description": "Hello World!",
"main": "electron/main.js", //main.js修改為electron/main.js
"author": "Jane Doe",
"license": "MIT",
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview",
"start": "electron ."
},
.......
}
4. 安裝concurrently
cnpm install concurrently
concurrently：可以同時執(zhí)行多個命令
用于此項目中的作用：將啟動vite和electron整合成一條命令，一鍵啟動
安裝好配置package.json
"dev": "concurrently vite \"electron .\""
5. 安裝 nodemon 實現(xiàn)熱更新
cnpm i nodemon -D
"dev": "concurrently vite \"nodemon --exec electron . --watch ./ --ext .js,.html,.css,.vue\""
6. 本地啟動
cnpm run dev
注意事項：electron 中的main.js 啟動地址 要與本地啟動的地址保持一致，否則打開是空白頁。
二、 打包和發(fā)布Electron
1. 修改electron/main.js 文件
添加
const NODE_ENV = process.env.NODE_ENV
win.loadURL(
NODE_ENV === 'development'
? 'http://localhost:3000'
:`file://${path.join(__dirname, '../dist/index.html')}`
);
if (NODE_ENV === "development") {
win.webContents.openDevTools()
}
2. 安裝electron-builder
cnpm i electron-builder -D
3. 配置package.json
"scripts": {
"pack": "electron-builder --dir",
"dist": "electron-builder"
},
"build": {
"appId": "luOne",
"productName": "sd",
"files": [
"dist/**/*",
"electron/**/*"
],
"directories": {
"buildResources": "assets",
"output": "electron-dist"
},
"win": {
"target": ["nsis"],
"icon": "build/icon.ico"
},
"mac": {
"category": "public.app-category.utilities"
},
"nsis": {
"oneClick": false,
"allowElevation": true,
"deleteAppDataOnUninstall": true,
"allowToChangeInstallationDirectory": true,
"createDesktopShortcut": true,
"createStartMenuShortcut": true,
"shortcutName": "測試文檔項目"
}
} 添加備注：
build: {
"nsis": {
"oneClick": false, // 是否一鍵安裝
"perMachine": false,//perMachine 可能會影響自動更新的安裝權(quán)限問題（windows7不受影響）
"allowElevation": true,// 允許請求提升。 如果為false，則用戶必須使用提升的權(quán)限重新啟動安裝程序。
"allowToChangeInstallationDirectory": true,// 允許修改安裝目錄
"installerIcon": "./build/icons/icon.ico",// 安裝圖標
"uninstallerIcon": "./build/icons/icon.ico",//卸載圖標
"installerHeaderIcon": "./build/icons/icon.ico",// 安裝時頭部圖標
"createDesktopShortcut": true, // 創(chuàng)建桌面圖標
"createStartMenuShortcut": true,// 創(chuàng)建開始菜單圖標
"runAfterFinish": true,// 安裝完成后是否運行項目
"shortcutName": "client-ico",// 圖標名稱
"include": "build/script/installer.nsh" // 自定義nsis腳本
},
}4. 打包
cnpm run dist
打包成功會自動生成 electron-dist 文件夾，其中會有一個exe 文件，直接運行exe文件即可。
到此這篇關于vue配置electron如何使用electron-builder進行打包的文章就介紹到這了,更多相關vue electron-builder打包內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- Electron 使? electron-builder 打包應用過程詳解
- 使用electron-builder將項目打包成桌面程序的詳細教程
- electron-builder打包vue2項目問題總結(jié)
- 快速解決electron-builder打包時下載依賴慢的問題
- vue項目使用electron-builder庫打包成桌面程序的過程
- electron-builder打包exe后白屏的解決方法
- electron-builder 的基本使用及electron打包步驟
- vite?+?electron-builder?打包配置詳解
- electron-builder打包配置詳解
- Electron 打包問題:electron-builder 下載各種依賴出錯(推薦)
- electron-builder打包與發(fā)布Electron應用
相關文章
下面小編就為大家分享一篇使用use注冊Vue全局組件和全局指令的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue如何實時往數(shù)組里追加數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
本文介紹如何從零開始構(gòu)建一個基于 Vue3 + Markdown 的在線簡歷生成工具,支持實時編輯預覽、模板切換、自定義樣式配置以及導出為 PDF,感興趣的小伙伴可以參考閱讀本文2025-07-07
本文主要介紹了vue獲取el-form的整體驗證狀態(tài)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
在使用el-table的時候經(jīng)常會涉及到表格的列合并，包括表格操作列的合并,下面這篇文章主要給大家介紹了關于el-table表格動態(tài)合并行及合并行列的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了Vue3.0 響應式系統(tǒng)源碼逐行分析講解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
Vue+Element?UI實現(xiàn)復制當前行數(shù)據(jù)的功能
這篇文章主要介紹了如何使用Vue?+?Element?UI?實現(xiàn)在列表的操作欄新增一個復制按鈕,復制當前行的數(shù)據(jù)可以打開新增彈窗后亦可以跳轉(zhuǎn)到新增頁面,感興趣的小伙伴可以參考下2023-11-11
vxe-table中vxe-grid中的合并單元格方式(合并行、列)
這篇文章主要介紹了vxe-table中vxe-grid中的合并單元格方式(合并行、列),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
這篇文章主要為大家詳細介紹了vue全局組件與局部組件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-03-03
Vue?ElementUI?table實現(xiàn)表格斜線分隔線
這篇文章主要為大家詳細介紹了Vue?ElementUI?table實現(xiàn)表格斜線分隔線，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03