vue3+vite搭建脚手架项目本地运行electron桌面应用

1.搭建脚手架项目

搭建Vue3+Vite+Ts脚手架-CSDN博客

2.创建完项目后,安装所需依赖包

npm i vite-plugin-electron electron@26.1.0

3.根目录下创建electron/main.ts

 electron/main.ts

/** electron/main.ts */import { app, BrowserWindow } from "electron";const createWindow = () => {const win = new BrowserWindow({width: 960,height: 600,webPreferences: {nodeIntegration: true, // 设置是否在页面中启用 Node.js 集成模式contextIsolation: false, // 设置是否启用上下文隔离模式。},});if (process.env.VITE_DEV_SERVER_URL) {win.loadURL(process.env.VITE_DEV_SERVER_URL); // 使用vite开发服务的url路径访问应用} else {}
};app.whenReady().then(createWindow);

4.配置vite.config.ts

import electron from "vite-plugin-electron";electron([{ entry: "electron/main.ts" }])

5.配置package.json

删除:"type": "module",

添加:"main": "dist-electron/main.js",

6.运行项目 npm run dev 自动弹出窗口

7.解决问题 

警告问题:The CJS build of Vite's Node API is deprecated. See https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.

解决方案

将 vite.config.ts 文件改名为 vite.config.mts

文件扩展名 .mts 明确地指示 Node.js 将该文件作为一个 ECMAScript Module (ESM) 来处理。
这与在 package.json 中设置 “type”: “module” 相类似,都是为了确保 Node.js 以 ESM 格式解析和执行模块。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/469676.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++ | Leetcode C++题解之第556题下一个更大元素III

题目: 题解: class Solution { public:int nextGreaterElement(int n) {int x n, cnt 1;for (; x > 10 && x / 10 % 10 > x % 10; x / 10) {cnt;}x / 10;if (x 0) {return -1;}int targetDigit x % 10;int x2 n, cnt2 0;for (; x2 …

大数据技术之Hadoop :我是恁爹

就如上图中的技术分类,大数据技术主要解决的就是海量数据的存储和计算问题。 这两个问题的解决方案最先被 Google 被提出,用于解决 Google 搜索引擎海量的网页存储和索引的构建。对应的技术就是日后被人所熟知的 HDFS 和 MapReduce。 不关注大数据的可…

云计算:定义、类型及对企业的影响

💓 博客主页:瑕疵的CSDN主页 📝 Gitee主页:瑕疵的gitee主页 ⏩ 文章专栏:《热点资讯》 云计算:定义、类型及对企业的影响 云计算:定义、类型及对企业的影响 云计算:定义、类型及对企…

如何优化Elasticsearch的查询性能?

优化Elasticsearch查询性能可以从以下几个方面进行: 合理设计索引和分片: 确保设置合理的分片和副本数,考虑数据量、节点数和集群大小。根据数据量和节点数量调整分片数量,避免使用过多分片,因为每个分片都需要额外的…

星期-时间范围选择器 滑动选择时间 最小粒度 vue3

星期-时间范围选择器 功能介绍属性说明事件说明实现代码使用范例 根据业务需要,实现了一个可选择时间范围的周视图。用户可以通过鼠标拖动来选择时间段,并且可以通过快速选择组件来快速选择特定的时间范围。 如图: 功能介绍 时间范围选择&…

光流法与直接法在SLAM中的应用

本文总结视觉SLAM中常用的光流法与直接法 1、Lucas-Kanade光流法 相机所拍摄到的图像随相机视角的变化而变化,这种变化也可以理解为图像中像素的反向移动。“光流”(Optical Flow)是指通过分析连续图像帧来估计场景中像素或特征点的运动的技…

SSE (Server-Sent Events) 服务器实时推送详解

Server-Sent Events 一、什么是 SSE ?二、SSE 的工作原理三、SSE 的基本配置1.HTTP 请求和响应头设置2.SSE 字段介绍3.SSE 事件数据流示例 四、SseEmitter 的基本配置1.SseEmitter 介绍及用法2.使用 SseEmitter 示例11)编写核心 SSE Client2)编写 Controller3)前端接收与处理 …

AI大模型:重塑软件开发流程的优势、挑战及应对策略

随着人工智能技术的飞速发展,AI大模型正在深刻影响着软件开发的各个环节。本文将详细分析AI在软件开发流程中带来的优势,面临的挑战,以及开发者的应对策略。 一、AI在软件开发流程中的优势 提高开发效率 AI大模型能够自动生成高质量的代码…

《重学Java设计模式》之 原型模式

原型模式主要解决的问题就是创建重复对象,而这部分对象内容本身比较复杂,生成过程可能从库或者RPC接口中获取数据的耗时较长,因此采用克隆的方式节省时间。 案例:上机考试抽题,要求打乱题目、答案数据 工厂结构 选择题…

Java项目实战II基于Spring Boot的药店管理系统的设计与实现(开发文档+数据库+源码)

目录 一、前言 二、技术介绍 三、系统实现 四、文档参考 五、核心代码 六、源码获取 全栈码农以及毕业设计实战开发,CSDN平台Java领域新星创作者,专注于大学生项目实战开发、讲解和毕业答疑辅导。 一、前言 随着医疗行业的快速发展和人们对健康需…

html+js+css实现拖拽式便签留言

前些日子在网上冲浪时,看到一个便签式留言墙,让人耳目一新。心想这个看着不错,额想要。于是便开始搜寻是否有相应开源插件,想将其引入自己的博客中。但是搜寻了一圈,都没有符合预期的,要么功能不符合。有的功能符合&am…

模型压缩相关技术概念澄清(量化/剪枝/知识蒸馏)

1.模型压缩背景 随着深度学习技术的不断发展,模型的规模和复杂度也随之增加。大型模型往往具有更高的精度和更强的泛化能力,但在实际应用中,模型的大小却成为了一个制约因素。模型体积过大会导致存储、传输和推理速度等方面的瓶颈&#xff0…

Linux入门:环境变量与进程地址空间

一. 环境变量 1. 概念 1️⃣基本概念: 环境变量(environment variables)一般是指在操作系统中用来指定操作系统运行环境的一些参数 如:我们在编写C/C代码的时候,在链接的时候,从来不知道我们的所链接的动态静态库在哪里&#x…

Mysql前言

文章目录 Mysql 数据库简介SQL 基础语法什么是 SQL语句SQL 的作用SQL 语句的分类SQL 通用语法查询状态 🏡作者主页:点击! 🤖Mysql专栏:点击! ⏰️创作时间:2024年11月12日18点20分 SQL是数据库…

VCSVerdi:KDB文件的生成和导入

相关阅读 VCShttps://blog.csdn.net/weixin_45791458/category_12828763.html Verdihttps://blog.csdn.net/weixin_45791458/category_12829428.html?spm1001.2014.3001.5482 前言 在复杂的设计中,很难在HDL或测试平台级别(如使用系统函数&#xff…

2024年【汽车修理工(高级)】考试试卷及汽车修理工(高级)证考试

题库来源:安全生产模拟考试一点通公众号小程序 汽车修理工(高级)考试试卷是安全生产模拟考试一点通总题库中生成的一套汽车修理工(高级)证考试,安全生产模拟考试一点通上汽车修理工(高级&#…

灵活就业,真的等同于失业吗?“三无人员”如何齐短板获贷款

现在灵活就业的人越来越多,目前有约2亿人选择灵活就业,今天咱们就来好好聊聊,灵活就业,它真的等同于失业吗? 咱们可以看看那些跑外卖的、做网约车司机的,虽然他们看起来在忙忙碌碌地工作,但细究…

python识别ocr 图片和pdf文件

#识别图片 pip3 install paddleocr pip3 install paddlepaddle#识别pdf pip3 install PyMuPDF 重点:路径不能有中文,不然pdf文件访问不了 from paddleocr import PaddleOCR from rest_framework.response import Response from rest_framework.views im…

由于找不到mfc120u.dll, 无法继续执行代码。重新安装程序可能解决引问题。

运行MFC程序报下面错误,无法到找运行库mfc120u.dll msvcr120.dll也找不到 下载C++运行库安装程序 mfc12对应2013运行库 运行库安装成功

介绍和安装及数据类型

1、介绍和安装 1.1、简介 ClickHouse是俄罗斯的Yandex于2016年开源的列式存储数据库(DBMS),使用C语言编写,主要用于在线分析处理查询(OLAP),能够使用SQL查询实时生成分析数据报告。 OLAP&…