vue3+vite+electron構(gòu)建項(xiàng)目完整實(shí)例代碼
一、創(chuàng)建項(xiàng)目
打開Powershell窗口輸入 npm create vite@latest electron-app
二、添加依賴
依賴安裝的時(shí)候可能超時(shí)而中斷可以用以下方法進(jìn)行解決。
在創(chuàng)建好的文件electron-app下建立一個(gè) .npmrc 的文件(注:.npmrc文件可用vscode創(chuàng)建,在當(dāng)前項(xiàng)目打開vscode中端輸入code .npmrc)
然后再npmrc文件里輸入
strict-ssl=false registry=https://registry.npmmirror.com/ electron_mirror=https://registry.npmmirror.com/-/binary/electron/ electron_builder_binaries_mirror=https://registry.npmmirror.com/-/binary/electron-builder-binaries/# ELECTRON_BUILDER_BINARIES_MIRROR=https://mirrors.huaweicloud.com/electron-builder-binaries/
然后開始安裝下面的依賴
npm install -D electron #主依賴
npm install electron-builder@24.6.4 --save-dev #打包依賴(打包為可安裝的exe或免安裝exe)
npm install -D electron-devtools-installer #開發(fā)調(diào)試
npm install -D vite-plugin-electron #vite構(gòu)建electron應(yīng)用
三、創(chuàng)建主進(jìn)程
在當(dāng)前目錄下創(chuàng)建創(chuàng)建 src-electron文件夾,在src-electron文件夾下創(chuàng)建main.js文件。輸入以下內(nèi)容
// src-electron/main.js
const { app, BrowserWindow } = require('electron')
const { join } = require('path')
// 屏蔽安全警告
// ectron Security Warning (Insecure Content-Security-Policy)
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'
// 創(chuàng)建瀏覽器窗口時(shí),調(diào)用這個(gè)函數(shù)。
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600,
//如果不添加,則使用的是默認(rèn)的圖標(biāo)
icon: join(__dirname,'../public/favicon.ico'),
title:'lvmabna'
})
// win.loadURL('http://localhost:3000')
// development模式
if(process.env.VITE_DEV_SERVER_URL) {
win.loadURL(process.env.VITE_DEV_SERVER_URL)
// 開啟調(diào)試臺(tái)
win.webContents.openDevTools()
}else {
win.loadFile(join(__dirname, '../dist/index.html'))
}
}
// Electron 會(huì)在初始化后并準(zhǔn)備
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
四、配置入口文件
在vite.config.ts 文件中
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import electron from 'vite-plugin-electron' //增加
export default defineConfig({
plugins: [
vue(),
vueJsx(),
//增加electron
electron({
// 主進(jìn)程入口文件
entry: './src-electron/main.js'
})
],
//配置端口
server:{
port:3000,
},
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
五、配置package.json
{
/*
界面的 title設(shè)置三種方法
1、默認(rèn)使用的是項(xiàng)目的入口文件index.html中的title,可以在這里修改。
2、也可以把index.html中的title給刪除掉,則讀取是下面的name值。
3、也可以在src-electron/main.js中 new BrowserWindow(...title:'lvmabna')這個(gè)函數(shù)中添加
*/
"name": "electron-desktop-tool",
"version": "0.0.0",
"private": true,
//"type": "module", //把這行刪除掉,新增下面一行
"main": "./src-electron/main.js", //新增
...
}
六、啟動(dòng)項(xiàng)目
npm run dev

七、打包
1、配置 package.json
{
"scripts": {
"dev": "vite",
"build": "run-p type-check \"build-only {@}\" --",
"preview": "vite preview",
"build-only": "vite build",
"type-check": "vue-tsc --build --force",
"electron:build": "vite build && electron-builder" //新增
},
....
//新增一個(gè) build屬性對(duì)象,里面主要配置打包的信息
"build": {
"productName": "ElectronDeskTopTool",
"appId": "dyy.dongyuanwai",
"copyright": "dyy.dongyuanwai ? 2024",
"compression": "maximum",
"asar": true,
"directories": {
"output": "release/" // 輸出目錄
},
"nsis": {
"oneClick": false,// 是否一鍵安裝
"allowToChangeInstallationDirectory": true,// 允許修改安裝目錄
"perMachine": true,
"deleteAppDataOnUninstall": true,
"createDesktopShortcut": true,// 創(chuàng)建桌面圖標(biāo)
"createStartMenuShortcut": true,// 創(chuàng)建開始菜單圖標(biāo)
"shortcutName": "ElectronDeskTopTool"
},
"win": {
"icon": "./public/logo.ico",// 安裝圖標(biāo)
"artifactName": "${productName}-v${version}-${platform}-setup.${ext}",//安裝包名稱
"target": [
{
"target": "nsis"
}
]
},
"mac": {
"icon": "./public/logo.ico",
"artifactName": "${productName}-v${version}-${platform}-setup.${ext}"
},
"linux": {
"icon": "./public/logo.ico",
"artifactName": "${productName}-v${version}-${platform}-setup.${ext}"
}
},
}
build更多設(shè)置
// 打包的配置都放到 build里
"build": {
"productName":"ElectronDeskTopTool",//項(xiàng)目名 這也是生成的exe文件的前綴名,也可以在每個(gè)環(huán)境中自行配置
"appId": "com.dyy.dongyuanwai",//應(yīng)用程序的唯一標(biāo)識(shí)符,通常是反轉(zhuǎn)的域名格式
"copyright":"dyy.dongyuanwai ? 2024",//版權(quán)信息,顯示在應(yīng)用程序中說明版權(quán)歸屬的地方
"compression": "maximum", //壓縮級(jí)別,指定打包時(shí)使用的壓縮級(jí)別。這里設(shè)置為"maximum"表示最大壓縮
"asar": true, // 是否啟用 asar 打包,asar 是 Electron 提供的一種文件打包方式,能夠提高應(yīng)用程序的性能和安全性。
"directories": { //指定輸出目錄,打包完成后的文件會(huì)放置在該目錄下。
"output": "release"
},
// windows相關(guān)的配置
"win": {
"icon": "xxx/icon.ico", //圖標(biāo)路徑
"artifactName": "${productName}-v${version}-${platform}-setup.${ext}" // 安裝包名稱
},
// 這個(gè)意思是打出來32 bit + 64 bit的包,但是要注意:這樣打包出來的安裝包體積比較大,所以建議直接打32的安裝包。
"arch": [
"x64",
"ia32"
]
}
2、win打包
npm run electron:build

總結(jié)
到此這篇關(guān)于vue3+vite+electron構(gòu)建項(xiàng)目的文章就介紹到這了,更多相關(guān)vue3+vite+electron構(gòu)建項(xiàng)目內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue自定義指令學(xué)習(xí)及應(yīng)用詳解
這篇文章主要為大家詳細(xì)介紹了Vue中自定義指令的學(xué)習(xí)以及如何利用Vue制作一個(gè)簡單的學(xué)生信息管理系統(tǒng),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-05-05
vue-router報(bào)錯(cuò):uncaught error during route 
這篇文章主要介紹了vue-router報(bào)錯(cuò):uncaught error during route navigati問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06
最全vue的vue-amap使用高德地圖插件畫多邊形范圍的示例代碼
這篇文章主要介紹了最全vue的vue-amap使用高德地圖插件畫多邊形范圍,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07
vue中使用loadsh的debounce防抖函數(shù)問題
這篇文章主要介紹了vue中使用loadsh的debounce防抖函數(shù)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
詳解elementui之el-image-viewer(圖片查看器)
這篇文章主要介紹了詳解elementui之el-image-viewer(圖片查看器),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
vue組件表單數(shù)據(jù)回顯驗(yàn)證及提交的實(shí)例代碼
今天小編就為大家分享一篇vue組件表單數(shù)據(jù)回顯驗(yàn)證及提交的實(shí)例代碼,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Vue實(shí)現(xiàn)星級(jí)評(píng)價(jià)效果實(shí)例詳解
這篇文章主要介紹了Vue實(shí)現(xiàn)星級(jí)評(píng)價(jià)效果的實(shí)例代碼,代碼簡單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12

