relectron框架——打包前端vue3、react为pc端exe可执行程序

文章目录

- ⭐前言
- ⭐搭建Electron打包环境
- - [💖 npm镜像调整](#💖 npm镜像调整)
  - [💖 初始化项目](#💖 初始化项目)
  - [💖 配置index.js](#💖 配置index.js)
- ⭐打包vue3
- ⭐打包react
- ⭐总结
- ⭐结束

⭐前言

大家好，我是yma16，本文分享关于使用electronjs打包前端vue3、react成exe可执行程序。。
vue3系列相关文章：
前端vue2、vue3去掉url路由" # "号------nginx配置
 csdn新星计划vue3+ts+antd赛道------利用inscode搭建vue3(ts)+antd前端模板
 认识vite_vue3 初始化项目到打包
 python_selenuim获取csdn新星赛道选手所在城市用echarts地图显示
 vue3 + fastapi 实现选择目录所有文件自定义上传到服务器
Electron前端框架

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。嵌入 Chromium 和 Node.js 到二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建在Windows上运行的跨平台应用 macOS和Linux------不需要本地开发经验。
electron文档

⭐搭建Electron打包环境

安装预编译的 Electron 二进制文件

💖 npm镜像调整

切换镜像地址

bash 复制代码

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

npm安装

bash 复制代码

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

💖 初始化项目

npm初始化配置

bash 复制代码

$ npm init

package.json

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 运行的main index.js 配置如下

javascript 复制代码

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()
    }
})