?前言

大家好，我是yma16，本文分享關(guān)于使用electronjs打包前端vue3、react成exe可執(zhí)行程序。。
vue3系列相關(guān)文章：
前端vue2、vue3去掉url路由“ # ”號——nginx配置
csdn新星計劃vue3+ts+antd賽道——利用inscode搭建vue3(ts)+antd前端模板
認(rèn)識vite_vue3 初始化項(xiàng)目到打包
python_selenuim獲取csdn新星賽道選手所在城市用echarts地圖顯示
vue3 + fastapi 實(shí)現(xiàn)選擇目錄所有文件自定義上傳到服務(wù)器
Electron前端框架
Electron是一個使用 JavaScript、HTML 和 CSS 構(gòu)建桌面應(yīng)用程序的框架。 嵌入 Chromium 和 Node.js 到 二進(jìn)制的 Electron 允許您保持一個 JavaScript 代碼代碼庫并創(chuàng)建 在Windows上運(yùn)行的跨平臺應(yīng)用 macOS和Linux——不需要本地開發(fā) 經(jīng)驗(yàn)。
electron文檔

?搭建Electron打包環(huán)境

安裝預(yù)編譯的 Electron 二進(jìn)制文件

?? npm鏡像調(diào)整

切換鏡像地址

ELECTRON_MIRROR="https://npmmirror.com/mirrors/electron/"

npm安裝

$ sudo npm install electron --unsafe-perm=true

?? 初始化項(xiàng)目

npm初始化配置

$ npm init

package.json

{
  "name": "coco-cat",
  "version": "1.0.0",
  "description": "tools",
  "main": "index.js",
  "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make"
  },
  "author": "yma16",
  "license": "MIT",
  "devDependencies": {
    "@electron-forge/cli": "^6.4.2",
    "@electron-forge/maker-deb": "^6.4.2",
    "@electron-forge/maker-rpm": "^6.4.2",
    "@electron-forge/maker-squirrel": "^6.4.2",
    "@electron-forge/maker-zip": "^6.4.2",
    "@electron-forge/plugin-auto-unpack-natives": "^6.4.2",
    "electron": "23.1.3"
  },
  "dependencies": {
    "electron-squirrel-startup": "^1.0.0"
  }
}

?? 配置index.js

electron 運(yùn)行的main index.js 配置如下

const { app, BrowserWindow } = require('electron')

const createWindow = () => {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences:{
            webSecurity:false
        }
    })

    win.loadFile('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()
    }
})

?打包vue3

vue3前端項(xiàng)目：
[python_selenuim獲取csdn新星賽道選手所在城市用echarts地圖顯示]

?打包react

react前端項(xiàng)目：
react搭建在線編輯html的站點(diǎn)——引入grapes實(shí)現(xiàn)在線拖拉拽編輯html
調(diào)整資源引入路徑改為 ./
請求改為完整路徑
把打包dist訪問初始化的electron項(xiàng)目

運(yùn)行檢查打包文件

make 打包exe文件。

打包成功！

?總結(jié)

前端dist文件

1. 前端的文件靜態(tài)資源路徑改為相對 ./
2. axios請求地址使用完整地址

electronjs配置

1. 配置國內(nèi)鏡像
2. 配置package的信息其中包含打包的exe名稱
3. index.js 配置打包html的入口文件

electronjs 優(yōu)勢
electronjs 打包前端文件為exe不需要很深代碼能力即可實(shí)現(xiàn)，是一個基于 React 的框架，對于初級前端開發(fā)十分友好，具有以下優(yōu)勢：

1. 高效性：relectron 充分利用了 React 的虛擬 DOM 和組件化的特性，能夠快速構(gòu)建高效的應(yīng)用程序。

2. 跨平臺：relectron 支持 Windows、Linux 和 macOS 等多個平臺，可以在不同的設(shè)備上運(yùn)行。

3. 可擴(kuò)展性：relectron 支持第三方插件和模塊，可以方便地集成其他的功能和服務(wù)。

4. 開發(fā)效率：relectron 能夠讓開發(fā)者使用熟悉的 React 開發(fā)工具和技術(shù)，減少學(xué)習(xí)成本，提高開發(fā)效率。

5. 應(yīng)用性能：relectron 通過使用本地編譯方式提升應(yīng)用程序的性能，同時支持多窗口和離線使用等特性，提高用戶體驗(yàn)。

?結(jié)束

本文分享到這結(jié)束，如有錯誤或者不足之處歡迎指出！

?? 點(diǎn)贊，是我創(chuàng)作的動力！
?? 收藏，是我努力的方向！
?? 評論，是我進(jìn)步的財富！
?? 感謝你的閱讀！文章來源地址http://www.zghlxwxcb.cn/news/detail-783357.html

到了這里，關(guān)于relectron框架——打包前端vue3、react為pc端exe可執(zhí)行程序的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！