Vue-Electron配置及踩坑

前言

大道至简。太复杂的教程不看。

本篇将记述我创建好Vue3项目之后,用Electron把页面呈现出来的整个过程。会记录一些踩坑。

首先,Electron官网可以参考。但是它只是作出了一个普通的html结构该如何用Electron呈现出来,vue的配置有一些变更。

参考这篇文档就好了。

具体步骤

步骤一:创建一个Vue项目(不赘述);

步骤二:下载Electron包:
在这里插入图片描述
步骤三:在根目录下创建Electron文件夹,里面创建一个Electron的入口文件:main.js,内容如下。app控制Electron的生命周期,而BrowserWindow用于控制其窗口。所以我们可以更改一个自己认为合适的桌面应用尺寸:

const { app, BrowserWindow } = require('electron')
// const path = require("path")const createWindow = () => {const mainWindow = new BrowserWindow({width: 1000,height: 700,})// 主要改了这里// mainWindow.loadFile(path.join(__dirname, "./index.html"));// 使用 loadURL 加载 http://localhost:3004 ,也就是我们刚才创建的 Vue 项目地址// 3004 改为你 Vue 项目的端口号mainWindow.loadURL("http://localhost:8080/");
}app.whenReady().then(() => {createWindow()
})

步骤四:在vue的package.JSON中配置Electron的入口以及指令,这里需要注意,main后面跟的是刚刚配置Electron的入口文件main.js的位置,而electron后面的命令是:

electron .

在这里插入图片描述
步骤五:运行项目
先跑vue项目,再跑electron,开两个终端,分别执行:

npm run serve
npm run electron

最后的效果:
在这里插入图片描述
如果想在electron应用内部调试控制台,快捷键:ctrl+shift+i:
在这里插入图片描述

踩坑部分

1.下载的东西太多,有的文档会要求下载各种文件,而且npm的源不一定会有那个对应的包。其实初期不需要那么多的东西,可以直接按照上面的步骤来;

2.main.js文件中的地址需要根据自己的本地运行来配置,一般Vue的端口号是8080,vite默认的端口号又不太一样。所以需要注意。
在这里插入图片描述

3.如果按照上述步骤走还有bug,可以检查下electron的入口文件是否地址是对的。以及包的版本问题。如果实在有问题也可以评论区见~

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

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

相关文章

C 函数指针与回调函数

函数指针 函数指针是指向函数的指针变量。 通常我们说的指针变量是指向一个整型、字符型或数组等变量,而函数指针是指向函数。 函数指针可以像一般函数一样,用于调用函数、传递参数。 函数指针类型的声明: typedef int (*fun_ptr)(int,i…

OC分层渲染详解,OC分层渲染与云渲染区别

​OC分层渲染通过分层处理场景来提升渲染效率,而云渲染借助云服务器进行远程高性能渲染。主要差异在于OC分层渲染优化了本地渲染过程,云渲染则依靠云计算资源执行。 OC分层渲染是指什么 OC分层渲染,即Object Channel分层渲染,是一…

C语言运算符和表达式——赋值中的自动类型转换(精度损失问题)

目录 自动类型转换 数值精度损失 自动类型转换 在不同类型数据间赋值时,会发生自动类型转换 *取值范围大的类型 → 取值范围小的类型,通常是不安全的 *数值溢出(Overflow) *反之,一定都是安全的吗?…

fastlio2 给 interactive-slam 保存每帧的点云和每帧的里程计为单独的文件做后端回环优化和手动回环优化

为了给 interactive-slam 提供数据做后端回环优化和手动回环优化,需要保存每帧的点云和每帧的里程计为单独的文件,并且需要保存的名字为ros时间戳。 效果很好,比我自己写的手动回环模块好用 // This is an advanced implementation of the algorithm described in the // fo…

Golang和Java对比

其实我是Javaer转的Golang,我谈谈自己对Java和Golang的体会 我先讲讲我认为Golang的优点 1、Golang是一门新语言,相比于Java,他的生态要小很多,优点很明显,自由度高,学习成本低,能快速拉起一个…

linux 克隆更新 UUID方法

# 查看当前machine-id cat /etc/machine-id rm -rf /etc/machine-id cat /dev/null > /etc/machine-id reboot cat /etc/machine-id 更新网卡ID uuidgen 网卡名称 更新mysql uuid 如果是复制系统,需要改变各节点 uuid ln -s /mysql/data/3306/mysql.sock…

数据结构——二叉树链式结构

目录 前言 1. 二叉树的概念及结构 1.1概念 1.2 特殊的二叉树 1.3 二叉树的性质 1.4 二叉树的存储结构 2. 二叉树链式结构实现 2.1 手动创建二叉树 2.2 二叉树的遍历 2.2.1 前序、中序和后序遍历 2.2.2 层序遍历 2.3 节点个数以及高度 2.3.1 节点个数 2.3.2 求二叉…

宁波中墙建材蒸压加气混凝土砌块用半挂车运输,如何卸货,有什么注意点

宁波中墙建材蒸压加气混凝土砌块用半挂车运输,如何卸货,有什么注意点蒸压加气混凝土砌块是一种轻质多孔的建筑材料,由于其体积大且易碎,因此在运输和卸货过程中需要特别注意。以下是使用半挂车运输蒸压加气混凝土砌块时的卸货方法…

【云呐】固定资产清查盘点报告模板

固定资产清查盘点报告的大致框架:一、前言说明本次清查盘点的背景和目的清晰表述清查盘点的责任与相关依据二、清查盘点范围按部门或区域明确清查范围口径明确被清查项目,如所有原值一定数额以上的固定资产三、清查盘点时间确定清查盘点实施的时间节点 四、清查盘点方法描述清查…

Java中使用MQTT客户端库实现TLS/SSL加密通信的示例

以下是一个完整的Java代码示例,展示了如何使用Eclipse Paho MQTT客户端库在Java中实现TLS/SSL加密的MQTT通信。在这个示例中,我们将创建一个简单的MQTT客户端,该客户端连接到支持TLS/SSL的MQTT代理,并发布和订阅消息。 首先&…

【EI检索稳定,往届均已检索】第三届机器学习、云计算与智能挖掘国际会议(MLCCIM 2024)

第三届机器学习、云计算与智能挖掘国际会议(MLCCIM 2024) 2024年5月30日-6月3日 中国湖北|神农架 www.mlccim.org 会议简介 第三届机器学习、云计算与智能挖掘国际会议(MLCCIM 2024)将于2024年5月30日-6月3日在中国湖北省神农…

回文数-第15届蓝桥第5次STEMA测评Scratch真题精选

[导读]:超平老师的《Scratch蓝桥杯真题解析100讲》已经全部完成,后续会不定期解读蓝桥杯真题,这是Scratch蓝桥杯真题解析第179讲。 如果想持续关注Scratch蓝桥真题解读,可以点击《Scratch蓝桥杯历年真题》并订阅合集,…

nginx与tomcat的区别?

关于nginx和tomcat的概念 网上有很多关于nginx和tomcat是什么东西的定义,我总结了一下: tomcat是Web服务器、HTTP服务器、应用服务器、Servlet容器、web容器。 Nginx是Web服务器、HTTP服务器、正向/反向代理服务器,。 这里有两个概念是交叉的&#xff…

【C++STL详解(二)】——string类模拟实现

目录 前言 一、接口总览 二、默认成员函数 1.构造函数 2.拷贝构造 写法一:传统写法 写法二:现代写法(复用构造函数) 3.赋值构造 写法一:传统写法 写法二:现代写法(复用拷贝构造) 4.析构函数 三、…

包含密钥的OMP压缩感知模拟(MATLAB)

压缩感知(Compressed Sensing,CS)是一种新颖的信号采样和重建理论,它通过利用信号的稀疏性或者低维性,从极少量的观测中直接重建出完整的信号。压缩感知的核心思想是,在合适的条件下,信号本身的稀疏性或低维性可以使其信息内容大幅减少,从而可以通过较少的观测数据进行…

OSPF实验1

1,配置IP地址 [R1]dis ip interface brief Interface IP Address/Mask Physical Protocol GigabitEthernet0/0/0 200.1.1.1/24 up up GigabitEthernet0/0/1 10.1.1.1/24 up …

ORA-01779 BYPASS_UJVC 11.2后废弃了

有这么个update语句 update A t set status 1 where exists (select 1 from B B where B.code A.code) 因性能问题需要修改写法。 在oracle10G这么update是没问题的: update( select …

Linux文件处理之ln命令详解

Linux文件处理之ln命令详解 在Linux系统中,ln命令是一个非常重要的工具,用于创建文件或目录的链接。链接在Linux文件系统中是一个核心概念,它允许用户以不同的路径名访问同一个文件或目录。通过ln命令,我们可以创建硬链接和软链接(也称为符号链接)。本文将详细解释ln命令…

Oracle基础【7-Oracle中RMAN恢复管理器】

🌈个人主页:godspeed_lucip 🔥 系列专栏:Oracle从基础到进阶 本文对应Oracle实验报告源文件下载:公众号程序员刘同学回复oracle实验获取下载链接 实验七 RMAN恢复管理器一、实验目的二、实验环境三、实验内容1 为备份…

jsp实现增删改查——(二)添加、修改、删除学生信息

学生信息CRUD——添加、修改、删除 在上一小节中,我们写好了list.jsp,用一个table表格显示数据库student表中的各个学生的(学号,姓名,生活费,出生日期),并对表格每一行的数据都配有…