vite結(jié)合electron構(gòu)建前端桌面應(yīng)用程序

更新時間：2023年05月23日 16:27:48 作者：aibujin

本文主要介紹了vite結(jié)合electron構(gòu)建前端桌面應(yīng)用程序，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

一、創(chuàng)建 vite 項目

npm

npm create vite@latest

yarn

yarn create vite

選擇是否繼續(xù)

Need to install the following packages:
  create-vite@3.2.1
Ok to proceed? (y) y

項目名稱

Project name: ? vite-project

選擇框架

Select a framework: ? - Use arrow-keys. Return to submit.
>   Vanilla
    Vue
    React
    Preact
    Lit
    Svelte
    Others

選擇項目語言

Select a framework: ? - Use arrow-keys. Return to submit.
>   Vanilla
    Vue
    React
    Preact
    Lit
    Svelte
    Others

項目構(gòu)建成功，根據(jù)提示進入項目目錄，安裝依賴

Done. Now run:
  cd vite-project
  npm install
  npm run dev

二、構(gòu)建 Electron 項目

electron 官網(wǎng)：https://www.electronjs.org/zh/docs/latest/

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

安裝依賴（electron 安裝比較慢，耐心等待即可）

npm install electron -D
npm install vite-plugin-electron -D

編寫 Electron 入口文件，創(chuàng)建 electron/main.ts，與 src 目錄同級

// app 控制應(yīng)用程序的事件生命周期（相當于應(yīng)用程序）
// BrowserWindow 創(chuàng)建并控制瀏覽器窗口（相當于打開桌面彈框）
import { app, BrowserWindow, Menu } from 'electron'
import path from 'path'
// 定義全局變量，獲取窗口實例
let win: BrowserWindow | null;
/**
 * 創(chuàng)建一個窗口
 */
const createWindow = () => {
    win = new BrowserWindow({
        width: 1200,
        height: 800,
        center: true,
        // autoHideMenuBar: true,
        backgroundColor: 'rgb(0, 0, 0)',
        webPreferences: {
            devTools: true,
            // 集成網(wǎng)頁和 Node.js，也就是在渲染進程中，可以調(diào)用 Node.js 方法
            nodeIntegration: true,
            contextIsolation: false,
        }
    })
    // You can use `process.env.VITE_DEV_SERVER_URL` when the vite command is called `serve`
    if (process.env.VITE_DEV_SERVER_URL) {
        win.loadURL(process.env.VITE_DEV_SERVER_URL)
    } else {
        // Load your file
        win.loadFile(path.resolve(__dirname, '../dist/index.html'));
    }
    // 關(guān)閉窗口時就關(guān)閉程序，避免占用過多資源
    win.on("close", () => {
        win = null
    })
}
// 自定義菜單
const createMenu = () => {
    const Menus: any = [
        {
            label: 'Files',
            submenu: [
                {
                    label: '網(wǎng)頁版',
                    role: 'help',
                    submenu: [{
                        label: '網(wǎng)頁版',
                        click: function () {
                            alert('網(wǎng)頁版')
                        }
                    }]
                },
                {
                    label: '幫助',
                    role: 'help',
                    submenu: [{
                        label: '幫助文檔',
                        click: function () {
                            alert('幫助文檔')
                        }
                    }]
                }
            ]
        }
    ];
    const mainMenu = Menu.buildFromTemplate(Menus);
    Menu.setApplicationMenu(mainMenu);
}
// 初始化app（在 Electron 完成初始化時觸發(fā)），掛載上面創(chuàng)建的 桌面應(yīng)用程序窗口
app.whenReady().then(() => {
    createWindow()
    // createMenu()
})

在 vite.config.ts 中，配置 Electron 入口文件（注意：vite-plugin-electron 版本不同，electron 配置可能不一樣）

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({
            entry: 'electron/main.ts',
        }),
    ],
})

在 package.json 中，增加 main 字段，去掉 type 字段

?? 默認情況下, electron 文件夾下的文件將會被構(gòu)建到 dist-electron（注意：vite-plugin-electron 版本不同，構(gòu)建的文件夾也可能不同）

?? 目前, Electron 尚未支持 “type”: “module”，需要去掉 type 字段

"main": "dist-electron/main.js",

運行項目

npm run dev

vite + electron 構(gòu)建前端桌面應(yīng)用程序

三、打包 Electron 桌面程序

安裝打包依賴 electron-builder

npm install electron-builder -D

在 package json 中，配置 build 命令

"build": "vue-tsc --noEmit && vite build && electron-builder"

修改 package.json，增加 electron-builder 相關(guān)配置

?? 注意：下面 build/files中，dist/**/* 是項目打包文件，dist-electron/**/* 是 Electron 入口文件，插件版本不同所構(gòu)建的文件夾可能不同

"build": {
    "appId": "com.electron.desktop",
    "productName": "electron",
    "asar": true,
    "copyright": "Copyright ? 2022 electron",
    "directories": {
        "output": "release/"
    },
    "files": [
        "dist/**/*",
        "dist-electron/**/*"
    ],
    "mac": {
        "artifactName": "${productName}_${version}.${ext}",
        "target": [
            "dmg"
        ]
    },
    "win": {
        "target": [
            {
                "target": "nsis",
                "arch": [
                    "x64"
                ]
            }
        ],
        "artifactName": "${productName}_${version}.${ext}"
    },
    "nsis": {
        "oneClick": false,
        "perMachine": false,
        "allowToChangeInstallationDirectory": true,
        "deleteAppDataOnUninstall": false
    },
    "publish": [
        {
            "provider": "generic",
            "url": "http://127.0.0.1:8080"
        }
    ],
    "releaseInfo": {
        "releaseNotes": "版本更新的具體內(nèi)容"
    }
},

執(zhí)行打包，安裝應(yīng)用

npm run build

?? 解決辦法：關(guān)閉電腦管家、360或者別的殺毒軟件即可；

打包成功后，生成的文件都放到了 release 目錄下（之前在 package.json 里是這么配置的）

點擊 electron_0.0.0.exe ，安裝即可；

安裝之后運行程序，頁面沒有出來，控制臺有錯

看到這個錯首先我們找到 release/win-unpacked/resources，找到 app.asar 然后解壓 app.asar

安裝 asar 工具

npm install -g asar

asar 的壓縮與解壓

解壓：asar extract app.asar app

asar extract 源app.asar文件 目標解壓文件夾

壓縮：asar pack app app.asar

asar pack 源解壓文件夾 目標asar壓縮文件名(app.asar)

解壓之后可以看到 dist-electron 和 dist 是同一級的，修改 electron/main.ts 即可

win.loadFile(path.resolve(__dirname, '../dist/index.html'));

四、項目地址

項目地址：https://github.com/aibuijn/vite-electron

到此這篇關(guān)于vite結(jié)合electron構(gòu)建前端桌面應(yīng)用程序的文章就介紹到這了,更多相關(guān)vite electron構(gòu)建桌面應(yīng)用程序內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: