亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時間:2023年05月23日 16:27:48   作者:aibujin  
本文主要介紹了vite結(jié)合electron構(gòu)建前端桌面應(yīng)用程序,文中通過示例代碼介紹的非常詳細(xì),對大家的學(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ù)提示進(jìn)入項目目錄,安裝依賴

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)用程序的事件生命周期(相當(dāng)于應(yīng)用程序)
// BrowserWindow 創(chuàng)建并控制瀏覽器窗口(相當(dā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,也就是在渲染進(jìn)程中,可以調(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 字段

?? 默認(rèn)情況下, 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文件 目標(biāo)解壓文件夾

壓縮:asar pack app app.asar

asar pack 源解壓文件夾 目標(biāo)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)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Vue3配置axios跨域?qū)崿F(xiàn)過程解析

    Vue3配置axios跨域?qū)崿F(xiàn)過程解析

    這篇文章主要介紹了Vue3配置axios跨域?qū)崿F(xiàn)過程解析,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2020-11-11
  • element?ui組件中element.style怎么改詳解

    element?ui組件中element.style怎么改詳解

    element.style是一種內(nèi)聯(lián)樣式,一般都是代碼里寫死的,下面這篇文章主要給大家介紹了關(guān)于element?ui組件中element.style怎么改的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
    2023-06-06
  • vue項目中將element-ui table表格寫成組件的實現(xiàn)代碼

    vue項目中將element-ui table表格寫成組件的實現(xiàn)代碼

    這篇文章主要介紹了vue項目中將element-ui table表格寫成組件的方法,本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值 ,需要的朋友可以參考下
    2019-06-06
  • Vue中如何把hash模式改為history模式

    Vue中如何把hash模式改為history模式

    這篇文章主要介紹了Vue中如何把hash模式改為history模式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-07-07
  • Vue中跨標(biāo)簽通信詳解

    Vue中跨標(biāo)簽通信詳解

    這篇文章主要為大家詳細(xì)介紹了介紹了Vue中跨標(biāo)簽通信的相關(guān)知識,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2024-01-01
  • 如何使用Webpack優(yōu)化Vue項目的打包流程

    如何使用Webpack優(yōu)化Vue項目的打包流程

    在開發(fā)基于Vue.js的應(yīng)用時,隨著項目規(guī)模的擴(kuò)大,單個文件的體積也會隨之增長,特別是當(dāng)涉及到大量的依賴庫和復(fù)雜的業(yè)務(wù)邏輯時,本文將詳細(xì)介紹如何使用Webpack來優(yōu)化Vue項目的打包流程,需要的朋友可以參考下
    2024-09-09
  • vue-router定義元信息meta操作

    vue-router定義元信息meta操作

    這篇文章主要介紹了vue-router定義元信息meta操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-12-12
  • vue+echarts+datav大屏數(shù)據(jù)展示及實現(xiàn)中國地圖省市縣下鉆功能

    vue+echarts+datav大屏數(shù)據(jù)展示及實現(xiàn)中國地圖省市縣下鉆功能

    這篇文章主要介紹了vue+echarts+datav大屏數(shù)據(jù)展示及實現(xiàn)中國地圖省市縣下鉆,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-11-11
  • 在vue中使用Base64轉(zhuǎn)碼的案例

    在vue中使用Base64轉(zhuǎn)碼的案例

    這篇文章主要介紹了在vue中使用Base64轉(zhuǎn)碼的案例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • vue+Element-ui實現(xiàn)登錄注冊表單

    vue+Element-ui實現(xiàn)登錄注冊表單

    這篇文章主要為大家詳細(xì)介紹了vue+Element-ui實現(xiàn)登錄注冊表單,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-11-11

最新評論