基于Electron24+Vite4+Vue3搭建桌面端應(yīng)用實(shí)戰(zhàn)教程

更新時(shí)間：2023年05月27日 11:26:16 作者：xiaoyan2017

這篇文章主要介紹了基于Electron24+Vite4+Vue3搭建桌面端應(yīng)用,這次給大家主要分享的是基于electron最新版本整合vite4.x構(gòu)建vue3桌面端應(yīng)用程序，需要的朋友可以參考下

之前也有使用vite2+vue3+electronc創(chuàng)建桌面端項(xiàng)目，不過vue-cli-plugin-electron-builder腳手架插件構(gòu)建的項(xiàng)目electron版本只有13.x。如今electron版本都到了24，顯然不能再用之前的方法創(chuàng)建項(xiàng)目了。于是閑暇時(shí)間就搗鼓了electron24+vite4搭建桌面程序，中間踩了不少坑，現(xiàn)記錄如下，希望對(duì)大家有所幫助~~

版本信息

vite: ^4.3.2
vue: ^3.2.47
electron: ^24.4.0
electron-builder: ^23.6.0

創(chuàng)建vite4+vue3項(xiàng)目

vite官網(wǎng)提供了npm/yarn/pnpm等方式創(chuàng)建vue3項(xiàng)目。

yarn create vite electron-vite4-vue3
cd electron-vite4-vue3
yarn install
yarn dev

到這里一個(gè)簡(jiǎn)單的vite3+vue3項(xiàng)目就初始化好了。

安裝Electron及相關(guān)依賴包

基礎(chǔ)vue3項(xiàng)目創(chuàng)建好后，需要在項(xiàng)目中安裝一些electron依賴的包。如果在安裝過程中卡住或失敗，建議切換淘寶鏡像，使用cnpm安裝。

# 安裝electron
yarn add -D electron
# 安裝electron-builder 用于打包可安裝exe程序和綠色版免安裝exe程序
yarn add -D electron-builder
# 安裝electron-devtools-installer 用于開發(fā)調(diào)試electron
yarn add -D electron-devtools-installer

到這一步還需要安裝一個(gè)構(gòu)建electron程序的vite插件vite-plugin-electron

yarn add -D vite-plugin-electron

vite-plugin-electron：用于構(gòu)建electron應(yīng)用程序的vite插件。僅需少量配置，即可快速整合vite electron開發(fā)環(huán)境。

該插件集成了Vite和Electron，方便在渲染進(jìn)程中使用Node API或者Electron API功能。

https://github.com/electron-vite/vite-plugin-electron

新建主進(jìn)程文件

在項(xiàng)目根目錄新建background.js文件，編寫主進(jìn)程代碼。

const { app, BrowserWindow } = require('electron')
const { join } = require('path')
// 屏蔽安全警告
// ectron Security Warning (Insecure Content-Security-Policy)
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'
const createWindow = () => {
    const win = new BrowserWindow({
        // 窗口圖標(biāo)
        icon: join(__dirname, 'resource/shortcut.ico'),
        width: 800,
        height: 600,
        webPreferences: {
            // contextIsolation: false,
            // nodeIntegration: true,
            // preload: path.join(__dirname, 'preload.js')
        }
    })
    // 加載vue url視本地環(huán)境而定，如http://localhost:5173
    // 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'))
    }
}
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.js中引入vite-plugin-electron插件，配置主進(jìn)程入口，將electron和vite項(xiàng)目結(jié)合起來。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron'
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        electron({
            // 主進(jìn)程入口文件
            entry: 'background.js'
        })
    ],
    /*開發(fā)服務(wù)器選項(xiàng)*/
    server: {
        // 端口
        port: 3000,
    }
})

如果到這一步，運(yùn)行yarn dev會(huì)報(bào)錯(cuò)，需要在package.json文件中加入"main": "background.js"入口配置。

如果報(bào)錯(cuò)如下，需要去掉package.json文件中 "type": "module" 配置。

完整的package.json配置如下

{
  "name": "electron-vite4-vue3",
  "private": true,
  "version": "0.0.0",
  "description": "基于Electron24+Vite4.x+Vue3搭建項(xiàng)目框架",
  "author": "andy <282310962@qq.com>",
  "copyright": "MIT License(MIT) ?2023 Andy",
  "main": "background.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "electron:serve": "vite --host",
    "electron:build": "vite build && electron-builder"
  },
  "dependencies": {
    "vue": "^3.2.47"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.1.0",
    "electron": "^24.4.0",
    "electron-builder": "^23.6.0",
    "electron-devtools-installer": "^3.2.0",
    "vite": "^4.3.2",
    "vite-plugin-electron": "^0.11.2"
  }
}

到這里，yarn dev啟動(dòng)項(xiàng)目，就能成功運(yùn)行了。

electron-builder打包配置

項(xiàng)目已經(jīng)運(yùn)行起來了，接下來就需要配置一些electron-builder打包腳本了。在項(xiàng)目根目錄新建electron-builder.json配置文件。

話不多說，直接上代碼：

{
    "productName": "ElectronVite4Vue3",
    "appId": "cc.xiaoyan.electron-vite4-vue3",
    "copyright": "Copyright ? 2023-present Andy",
    "compression": "maximum",
    "asar": true, // 打包格式壓縮
    "directories": {
        "output": "release/${version}"  // 打包輸出目錄
    },
    // 配置extraResources后，electron-builder會(huì)在打包時(shí)將extraResources中指定的文件復(fù)制到打包后應(yīng)用程序的根目錄/resources文件夾下
    /*"extraResources": [
        {
            "from": "./resource",
            "to": "resource"
        }
    ],*/
    "nsis": {
        "oneClick": false,
        "allowToChangeInstallationDirectory": true,
        "perMachine": true,
        "deleteAppDataOnUninstall": true,
        "createDesktopShortcut": true,
        "createStartMenuShortcut": true,
        "shortcutName": "ElectronVite4Vue3"
    },
    "win": {
        "icon": "./resource/shortcut.ico",
        "artifactName": "${productName}-v${version}-${platform}-${arch}-setup.${ext}",
        "target": [
            {
                "target": "nsis",
                "arch": ["ia32"]
            }
        ]
    },
    "mac": {
        "icon": "./resource/shortcut.icns",
        "artifactName": "${productName}-v${version}-${platform}-${arch}-setup.${ext}"
    },
    "linux": {
        "icon": "./resource",
        "artifactName": "${productName}-v${version}-${platform}-${arch}-setup.${ext}"
    }
}

打包構(gòu)建

yarn electron:build

圖標(biāo)等資源文件放在resource目錄下

打包后顯示的任務(wù)欄及程序圖標(biāo)。

打包程序圖標(biāo)配置

窗口圖標(biāo)配置

主進(jìn)程中的__dirname變量指向當(dāng)前主進(jìn)程文件的目錄。

至此一個(gè)簡(jiǎn)易版的electron24+vite4跨端項(xiàng)目就搭建好了，至于主進(jìn)程/渲染進(jìn)程之間的通訊后續(xù)再分享哈~~

到此這篇關(guān)于基于Electron24+Vite4+Vue3搭建桌面端應(yīng)用實(shí)戰(zhàn)教程的文章就介紹到這了,更多相關(guān)Electron24+Vite4+Vue3搭建桌面內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: