使用 electron 把 vue 项目打包成客户端

news/2024/12/12 13:05:08/

1. 新建一个Vue项目

        新建一个vue项目,或者在已经写好的vue项目上操作

2. 安装依赖包

        需要安装的包有2个

        electron

        electron-builder

        安装失败的,可看另外一篇解决方法https://blog.csdn.net/Anorry/article/details/144061069?spm=1001.2014.3001.5501

3. 在项目根目录创建文件夹,存放文件

在根目录新建 electron 文件夹,文件夹下存放两个文件:main.js(主进程)、preload.js(渲染进程)

main.js

const { app, BrowserWindow, Menu } = require("electron");
const path = require("path");
const NODE_ENV = process.env.NODE_ENV;function createWindow() {Menu.setApplicationMenu(null);// 创建浏览器窗口const mainWindow = new BrowserWindow({show: false,minWidth: 1440,minHeight: 900,webPreferences: {partition: String(+new Date()),preload: path.join(__dirname, "preload.js"),},});mainWindow.maximize();mainWindow.show();// 如果是开发环境就把当前运行的web端口做成客户端预览// 如果是生产环境就把打包后的index做成客户端预览mainWindow.loadURL(NODE_ENV === "development"? "http://localhost:8080": `file://${path.join(__dirname, "../dist/index.html")}`);
}// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {createWindow();app.on("activate", function () {// 通常在 macOS 上,当点击 dock 中的应用程序图标时,如果没有其他// 打开的窗口,那么程序会重新创建一个窗口。if (BrowserWindow.getAllWindows().length === 0) createWindow();});
});// 除了 macOS 外,当所有窗口都被关闭的时候退出程序。 因此,通常对程序和它们在
// 任务栏上的图标来说,应当保持活跃状态,直到用户使用 Cmd + Q 退出。
app.on("window-all-closed", function () {if (process.platform !== "darwin") app.quit();
});

preload.js

window.addEventListener('DOMContentLoaded', () => {const replaceText = (selector, text) => {const element = document.getElementById(selector)if (element) element.innerText = text}for (const dependency of ['chrome', 'node', 'electron']) {replaceText(`${dependency}-version`, process.versions[dependency])}})

4. 在 vite.config.js 内配置

配置基本路径 ./ 防止出现打包后打开页面空白

publicPath: './',
transpileDependencies: true,

5. 在 package.json 内配置入口文件,配置一下运行命令

"main": "electron/main.js","electron": "wait-on tcp:8090 && cross-env NODE_ENV=development electron .",

6. 安装两个库

  • cross-env:该库让开发者只需要注重环境变量的设置,而无需担心平台设置
  • wait-on:等待资源,此处用来等待url可访问

为了使项目和electron正常运行,需要先运行项目,使得其开发服务器的url可以正常访问,然后再开启electron去加载url。

此处需要安装两个库

7. 配置electron打包命令和配置项

在前面我们安装了 electron-builder 依赖,所以这里无需安装

把下面代码,放到 package.json 内,与 dependencies 同级

"build": {"appId": "com.test","productName": "electron打包测试","copyright": "Copyright © 2023","mac": {"category": "public.app-category.utilities","icon": "public/icons/icon.icns"},"win": {},"nsis": {"oneClick": false,"allowToChangeInstallationDirectory": true},"files": ["dist/**/*","electron/**/*"],"directories": {"buildResources": "assets","output": "dist_electron"}}

"electron:build": "vite build  --mode production && electron-builder",

8. 运行命令 npm run electron:build 打包

打包成功后,会在根目录出现一个 dist_electron 文件夹,文件夹下会有一个 .exe 应用程序


http://www.ppmy.cn/news/1554500.html

相关文章

深度学习常用损失函数介绍

均方差损失(Mean Square Error,MSE) 均方误差损失又称为二次损失、L2损失,常用于回归预测任务中。均方误差函数通过计算预测值和实际值之间距离(即误差)的平方来衡量模型优劣。即预测值和真实值越接近&…

IMX6ULL开发板挂载 Ubuntu 的 NFS 目录,并以交叉编译得到的hello程序进行测试

首先参考博文 https://blog.csdn.net/wenhao_ir/article/details/144404637 使得IMX6ULL开发板、PC机上的USB网卡、VMware中的Ubuntu能互相Ping 通 然后开始将Ubuntu 的 NFS 目录挂载到Ubuntu中。 为什么挂载? 答:其实是把 Ubuntu中的某个目录通过NFS网…

双向链表的模拟实现 —— LinkedList

MyLinkedList类 public class MyLinkedList {// 定义节点类static class Node {int val;Node prev;Node next;public Node() {}public Node(int val) {this.val val;}}// 定义头节点private Node head;// 定义尾结点private Node tail;// 头插public void headInsert(int val…

Linux C语言操作sqlite3数据库

一、环境配置 1、下载源码:sqlite-autoconf-3470200.tar.gz 2、解压,cd到源码主目录 3、配置参数 ./configure --prefix/usr/local/ 如果是交叉编译环境 ./configure CC/opt/rk3288/gcc-linaro/bin/arm-linux-gnueabihf-gcc --hostarm-linux --pre…

《知识拓展 · 统一建模语言UML》

📢 大家好,我是 【战神刘玉栋】,有10多年的研发经验,致力于前后端技术栈的知识沉淀和传播。 💗 🌻 CSDN入驻不久,希望大家多多支持,后续会继续提升文章质量,绝不滥竽充数…

【jvm】垃圾回收的优点和原理

目录 1. 说明2. 优点3. 原理3.1 发现无用对象3.2 回收无用对象所占用的内存 4. 回收算法4.1 标记-清除算法4.2 复制算法4.3 标记-整理算法4.4 分代收集算法 1. 说明 1.JVM(Java虚拟机)垃圾回收是Java语言的一大特性,它自动管理内存&#xff…

【Linux】git操作

git操作 gitee为例 新建仓库并拉取到本地 在gitee上新建仓库后 我们点击这个橙色的克隆、下载 选择HTTPS的链接进行复制 我们创建一个test目录并cd进去 我们就可以把远端仓库拉取下来: git clone后面带上刚才复制的链接 现在test目录下就有我们拉取下来的仓库…

如何绕过IP禁令

网站、游戏和应用程序可以屏蔽特定IP地址,从而阻止使用该IP地址的任何人访问其服务。这称为IP禁令。管理员可以出于多种原因(例如发出过多请求或可疑活动)屏蔽IP地址。但是,这些禁令会使收集数据或访问在线内容变得更加困难。 一…