个人中心
文章发布
退出
作者热门文章
- Java锁的逻辑（结合对象头和ObjectMonitor）
- 还在用饼状图？来瞧瞧这些炫酷的百分比可视化新图形（附代码实现）⛵
- 自动注册实体类到EntityFrameworkCore上下文，并适配ABP及ABPVNext
- 基于Sklearn机器学习代码实战
26
4
一说到创建桌面应用，就不得不提及 Electron 和 Tauri 框架。这次给大家主要分享的是基于electron最新版本整合vite4.x构建vue3桌面端应用程序.
之前也有使用vite2+vue3+electronc创建桌面端项目，不过 vue-cli-plugin-electron-builder 脚手架插件构建的项目electron版本只有13.x。如今electron版本都到了24，显然不能再用之前的方法创建项目了。于是闲暇时间就捣鼓了electron24+vite4搭建桌面程序，中间踩了不少坑，现记录如下，希望对大家有所帮助~~ 。
vite: ^4.3.2
vue:
^3.2.47
electron:
^24.4.0
electron
-builder: ^23.6.0
vite官网提供了npm/yarn/pnpm等方式创建vue3项目.
yarn create vite electron-vite4-
vue3
cd electron
-vite4-
vue3
yarn install
yarn dev
到这里一个简单的vite3+vue3项目就初始化好了.
基础vue3项目创建好后，需要在项目中安装一些electron依赖的包。如果在安装过程中卡住或失败，建议切换淘宝镜像，使用cnpm安装.
# 安装electron
yarn add
-
D electron
# 安装electron
-
builder 用于打包可安装exe程序和绿色版免安装exe程序
yarn add
-D electron-
builder
# 安装electron
-devtools-
installer 用于开发调试electron
yarn add
-D electron-devtools-installer
到这一步还需要安装一个构建electron程序的vite插件 vite-plugin-electron 。
yarn add -D vite-plugin-electron
vite-plugin-electron ： 用于构建electron应用程序的vite插件 。仅需少量配置，即可快速整合vite electron开发环境.
该插件集成了Vite和Electron，方便在渲染进程中使用Node API或者Electron API功能.
https://github.com/electron-vite/vite-plugin-electron 。
在项目根目录新建background.js文件，编写主进程代码.
const { app, BrowserWindow } = require(
'
electron
'
)
const {
join
} = require(
'
path
'
)
//
屏蔽安全警告
//
ectron Security Warning (Insecure Content-Security-Policy)
process.
env
[
'
ELECTRON_DISABLE_SECURITY_WARNINGS
'
] =
'
true
'
const createWindow
= () =>
{
const win
=
new BrowserWindow({
//
窗口图标
icon:
join
(__dirname,
'
resource/shortcut.ico
'
),
width:
800
,
height:
600
,
webPreferences: {
//
contextIsolation: false,
//
nodeIntegration: true,
//
preload: path.join(__dirname, 'preload.js')
}
})
//
加载vue url视本地环境而定，如http:
//
localhost:5173
//
win.loadURL('
http://localhost
:3000')
//
development模式
if
(process.
env
.VITE_DEV_SERVER_URL) {
win.loadURL(process.
env
.VITE_DEV_SERVER_URL)
//
开启调试台
win.webContents.openDevTools()
}
else
{
win.loadFile(
join
(__dirname,
'
dist/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()
})
接下来在vite.config.js中引入vite-plugin-electron插件，配置主进程入口，将electron和vite项目结合起来.
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:
'
background.js
'
})
],
/*
开发服务器选项
*/
server: {
//
端口
port:
3000
,
}
})
如果到这一步，运行yarn dev会报错，需要在package.json文件中加入 "main": "background.js" 入口配置.
如果报错如下，需要去掉package.json文件中 "type": "module" 配置.
完整的package.json配置如下 。
{
"name": "electron-vite4-vue3"
,
"private":
true
,
"version": "0.0.0"
,
"description": "基于Electron24+Vite4.x+Vue3搭建项目框架"
,
"author": "andy <282310962@qq.com>"
,
"copyright": "MIT License(MIT) ©2023 Andy"
,
"main": "background.js"
,
"scripts"
: {
"dev": "vite"
,
"build": "vite build"
,
"preview": "vite preview"
,
"electron:serve": "vite --host"
,
"electron:build": "vite build && electron-builder"
},
"dependencies"
: {
"vue": "^3.2.47"
},
"devDependencies"
: {
"@vitejs/plugin-vue": "^4.1.0"
,
"electron": "^24.4.0"
,
"electron-builder": "^23.6.0"
,
"electron-devtools-installer": "^3.2.0"
,
"vite": "^4.3.2"
,
"vite-plugin-electron": "^0.11.2"
}
}
到这里，yarn dev启动项目，就能成功运行了.
项目已经运行起来了，接下来就需要配置一些electron-builder打包脚本了。在项目根目录新建electron-builder.json配置文件.
话不多说，直接上代码:
{
"
productName
"
:
"
ElectronVite4Vue3
"
,
"
appId
"
:
"
cc.xiaoyan.electron-vite4-vue3
"
,
"
copyright
"
:
"
Copyright © 2023-present Andy
"
,
"
compression
"
:
"
maximum
"
,
"
asar
"
:
true
,
//
打包格式压缩
"
directories
"
: {
"
output
"
:
"
release/${version}
"
//
打包输出目录
},
//
配置extraResources后，electron-builder会在打包时将extraResources中指定的文件复制到打包后应用程序的根目录/resources文件夹下
/*
"extraResources": [
{
"from": "./resource",
"to": "resource"
}
],
*/
"
nsis
"
: {
"
oneClick
"
:
false
,
"
allowToChangeInstallationDirectory
"
:
true
,
"
perMachine
"
:
true
,
"
deleteAppDataOnUninstall
"
:
true
,
"
createDesktopShortcut
"
:
true
,
"
createStartMenuShortcut
"
:
true
,
"
shortcutName
"
:
"
ElectronVite4Vue3
"
},
"
win
"
: {
"
icon
"
:
"
./resource/shortcut.ico
"
,
"
artifactName
"
:
"
${productName}-v${version}-${platform}-${arch}-setup.${ext}
"
,
"
target
"
: [
{
"
target
"
:
"
nsis
"
,
"
arch
"
: [
"
ia32
"
]
}
]
},
"
mac
"
: {
"
icon
"
:
"
./resource/shortcut.icns
"
,
"
artifactName
"
:
"
${productName}-v${version}-${platform}-${arch}-setup.${ext}
"
},
"
linux
"
: {
"
icon
"
:
"
./resource
"
,
"
artifactName
"
:
"
${productName}-v${version}-${platform}-${arch}-setup.${ext}
"
}
}
打包构建 。
yarn electron:build
图标等资源文件放在resource目录下 。
打包后显示的任务栏及程序图标.
打包程序图标配置 。
窗口图标配置 。
主进程中的__dirname变量指向当前主进程文件的目录.
至此一个简易版的electron24+vite4跨端项目就搭建好了，至于主进程/渲染进程之间的通讯后续再分享哈~~ 。
。
最后此篇关于基于Electron24+Vite4+Vue3搭建桌面端应用的文章就讲到这里了,如果你想了解更多关于基于Electron24+Vite4+Vue3搭建桌面端应用的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。
26
4
0
我有一个使用 css 列的下拉菜单，当我使用 jquery slide() 时，它会调整下拉框的大小，并重排内容直到达到完整高度。 这是一个工作示例 https://codepen.io/peterg
我有一个带有嵌套 ScrollViewer 的 Expander，如下所示: 代码(简化版)
我想在所有 ajax 调用之后调用一些 javascript 函数。我知道如何调用每个单独的 ajax 调用中的函数，如下所示: function xyz() { if (window.XMLHttp
我想将值从应用程序端传递到 api。在此 api 调用中传递图像、名字、电子邮件、电话和位置。在 Debug模式下，检查值不会被传递。 代码下方 File file = null;
我正在尝试在使用reportlab生成的pdf中的表格后插入分页符，我正在使用以下函数生成pdf: def render_to_pdf(template_src, context_dict): t
CBPeripheralManager 是否有推荐的方法来终止连接。到目前为止我发现的最好的方法就是干脆不响应动态值，然后 BLE 堆栈似乎关闭了连接，但这似乎很粗糙。 一定有更好的方法吗？ 最佳答案
我的 API 的 REST 端位于以下地址:http://test.jll.aplikacje-dedykowane.pl/rest/warehouse/all 。现在，我尝试返回在此页面准备的 JS
我有以下 CPP 代码。我想做的是，当我的 native 端发生错误时，我会通知 Java 该错误。我用了How can I catch SIGSEGV (segmentation fault) an
限制对象的方法之一是像这样给函数添加限制 def ten_objects(): obj = Model.objects.all()[0:10] # limit to 10 retur
我目前在电信公司实习，这是一个专业，也是本科生。我有很多选择。据我所知，我知道独立应用程序端的 c、c++、c#、java 语言，在移动端我尝试进入 android 世界，也知道 php、mysql、
我想让我的边框底部看起来像这样: 有一个 flex 的末端。目前它看起来像这样: 我尝试使用的 CSS 是 border-bottom-right-radius: 10px;。代码如下所示:
我有一个 Flutter 项目，突然间，据我所知，我没有做任何特别的事情..Android 端开始显示错误，我完全迷路了，我完全不知道哪里出了问题，也不知道为什么会这样。 这就是我打开 android
我有一个自定义对象列表 (List) 。我需要将此数据发送到 React Native 端以显示在平面列表中。我该怎么做？这个列表出现在 类 NativeToReact(reactContext:Re
我有这个代码: #if defined(NOT_STANDALONE) JNIEXPORT void JNICALL sumTraces (JNIEnv* env, jclass caller,
我有一个定义一对多模型关系的 Django 应用程序。模型如下所示: from django.db import models # Create your models here. class Str
我有以下代码，它根据 IFrame 内容的大小调整 IFrame 的大小: function setIframeHeight(id) {
如何创建自定义过滤器 angularjs javascript Controller 端？我想通过 SegmentId 在名为段的数组中搜索，以创建过滤器，该过滤器通过 SegmentId 在段数组搜
我的代码在 netbeans 8.0.2 中我几乎尝试了所有方法，但没有结果。请帮助我。如何在 netbeans 中显示它？ 最佳答案 您只需单击源包(源文件)，它就会显示您的项目文件。 关于java
我想这是纯 C++ 问题和 OpenGL 问题之间的一种交叉。我有一个统一的缓冲区，并在其中分配 sizeof(ShaderData) 字节的空间。我在着色器的 GPU 端使用 std140 布局。
我对 Hadoop 中 reduce 端的文件合并过程的理解有问题，因为它在“Hadoop:权威指南”(Tom White)中有所描述。引用它: When all the map outputs ha
我是一名优秀的程序员,十分优秀！