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

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

⭐前言

大家好,我是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镜像调整

切换镜像地址

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

npm安装

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

💖 初始化项目

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 运行的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前端项目:

[python_selenuim获取csdn新星赛道选手所在城市用echarts地图显示]


调整打包 ./

把所有axios的请求地址都改成完整路径

将dist目录放到electronjs项目中

运行start 成功!

执行 make 命令打包!

打包输出exe在out目录下

⭐打包react

react前端项目:

react搭建在线编辑html的站点——引入grapes实现在线拖拉拽编辑html

调整资源引入路径改为 ./

请求改为完整路径

把打包dist访问初始化的electron项目

运行检查打包文件

make 打包exe文件。

打包成功!

⭐总结

前端dist文件

  1. 前端的文件静态资源路径改为相对 ./
  2. axios请求地址使用完整地址

electronjs配置

  1. 配置国内镜像
  2. 配置package的信息其中包含打包的exe名称
  3. index.js 配置打包html的入口文件

electronjs 优势

electronjs 打包前端文件为exe不需要很深代码能力即可实现,是一个基于 React 的框架,对于初级前端开发十分友好,具有以下优势:

  1. 高效性:relectron 充分利用了 React 的虚拟 DOM 和组件化的特性,能够快速构建高效的应用程序。
  2. 跨平台:relectron 支持 Windows、Linux 和 macOS 等多个平台,可以在不同的设备上运行。
  3. 可扩展性:relectron 支持第三方插件和模块,可以方便地集成其他的功能和服务。
  4. 开发效率:relectron 能够让开发者使用熟悉的 React 开发工具和技术,减少学习成本,提高开发效率。
  5. 应用性能:relectron 通过使用本地编译方式提升应用程序的性能,同时支持多窗口和离线使用等特性,提高用户体验。

⭐结束

本文分享到这结束,如有错误或者不足之处欢迎指出!


目录
相关文章
|
1月前
|
前端开发 JavaScript API
阿珊比较Vue和React:两大前端框架的较量
阿珊比较Vue和React:两大前端框架的较量
|
4天前
|
前端开发 JavaScript 测试技术
Jest与React Testing Library:前端测试的最佳实践
Jest和React Testing Library是React应用测试的核心工具。安装相关依赖后,在`jest.config.js`中配置Jest。测试时,编写描述性测试用例,使用`render`、`fireEvent`和`screen`来检查组件行为。Jest提供模拟功能,如模拟API调用。测试组件交互性时,模拟用户行为并验证状态变化。确保覆盖边缘情况,使用代码覆盖率报告评估测试完整性,并将测试集成到CI流程中。
7 1
|
8天前
|
缓存 前端开发 JavaScript
Webpack作为模块打包器,为前端项目提供了高度灵活和可配置的构建流程
【6月更文挑战第12天】本文探讨了优化TypeScript与Webpack构建性能的策略。理解Webpack的解析、构建和生成阶段是关键。优化包括:调整tsconfig.json(如关闭不必要的类型检查)和webpack.config.js选项,启用Webpack缓存,实现增量构建,代码拆分和懒加载。这些方法能提升构建速度,提高开发效率。
28 3
|
14天前
|
前端开发
前端React篇之React setState 调用的原理、React setState 调用之后发生了什么?是同步还是异步?
前端React篇之React setState 调用的原理、React setState 调用之后发生了什么?是同步还是异步?
|
14天前
|
前端开发
前端react入门day02-React中的事件绑定与组件
前端react入门day02-React中的事件绑定与组件
|
16天前
|
JavaScript 前端开发 应用服务中间件
蓝易云 - dockerfile部署前端vue打包的dist文件实战
这样,你的Vue应用就会在Docker容器中运行,你可以通过访问[http://localhost:8080](http://localhost:8080/)来查看你的应用。
109 0
|
1月前
|
前端开发 JavaScript 中间件
Vue3整合VxeTable,2024大厂前端面试
Vue3整合VxeTable,2024大厂前端面试
|
1月前
|
前端开发
vue2与vue3双向数据绑定的区别,前端面试自我介绍
vue2与vue3双向数据绑定的区别,前端面试自我介绍
|
1月前
|
前端开发
React Hooks - useState 的使用方法和注意事项(1),web前端开发前景
React Hooks - useState 的使用方法和注意事项(1),web前端开发前景
|
1月前
|
JavaScript 前端开发
vue3中使用jsx报错React is not defined和h is not defined
vue3中使用jsx报错React is not defined和h is not defined