vue3 ts vite electron开发桌面程序

1、搭建vue+ts+vite项目

# 创建Vue项目

npm init vue

# 安装依赖

npm install

# 一定要安装成开发依赖

npm install electron electron-builder -D

根目录创建plugins文件夹,文件夹中创建ts文件,vite.electron.build.ts是打包文件代码,vite.electron.dev.ts是开发环境代码

 vite.electron.build.ts代码

// 打包electron项目
import type { Plugin } from "vite";
import * as electronBuilder from "electron-builder";
import path from "path";
import fs from "fs";
import { createRequire } from 'module';

const require = createRequire(import.meta.url);

// 导出Vite插件函数
export const viteElectronBuild = (): Plugin => {
  return {
    name: "vite-electron-build",

    // closeBundle是Vite的一个插件钩子函数,用于在Vite构建完成后执行一些自定义逻辑。
    closeBundle() {
      // 定义初始化Electron的函数
      const initElectron = () => {
        // 使用esbuild编译TypeScript代码为JavaScript
        require("esbuild").buildSync({
          entryPoints: ["src/background.ts"],
          bundle: true,
          outfile: "dist/background.js",
          platform: "node",
          target: "node12",
          external: ["electron"],
        });
      };

      // 调用初始化Electron函数
      initElectron();

      // 修改package.json文件的main字段 不然会打包失败
      const json = JSON.parse(fs.readFileSync("package.json", "utf-8"));
      json.main = "background.js";
      fs.writeSync(
        fs.openSync("dist/package.json", "w"),
        JSON.stringify(json, null, 2)
      );

      // 创建一个空的node_modules目录 不然会打包失败
      fs.mkdirSync(path.resolve(process.cwd(), "dist/node_modules"));

      // 使用electron-builder打包Electron应用程序
      electronBuilder.build({
        config: {
          appId: "com.example.app",
          productName: "vite-electron",
          directories: {
            output: path.resolve(process.cwd(), "release"), // 输出目录
            app: path.resolve(process.cwd(), "dist"), // app目录
          },
          asar: true,
          nsis: {
            oneClick: false, // 取消一键安装
            allowToChangeInstallationDirectory: true // 选择安装目录
          },
        },
      });
    },
  };
};

vite.electron.dev.ts代码

// 编写electron开发模式
import type { Plugin } from "vite";
import type { AddressInfo } from "net";
import { spawn } from "child_process";
import fs from "node:fs";
import { createRequire } from 'module';

const require = createRequire(import.meta.url);

// 导出vite插件函数
export const viteElectronDev = (): Plugin => {
  return {
    name: "vite-electron-dev",
    // 在configureServer中实现插件的逻辑
    configureServer(server) {
      // 定义初始化Electron的函数
      const initElectron = () => {
        // 使用esbuild编译TypeScript代码为JavaScript
        require("esbuild").buildSync({
          entryPoints: ["src/background.ts"],
          bundle: true,
          outfile: "dist/background.js",
          platform: "node",
          target: "node12",
          external: ["electron"],
        });
      };

      // 调用初始化Electron函数
      initElectron();

      // 监听Vite的HTTP服务器的listening事件
      server?.httpServer?.once("listening", () => {
        // 获取HTTP服务器的监听地址和端口号
        const addressInfo = server?.httpServer?.address() as AddressInfo;
        const IP = `http://localhost:${addressInfo.port}`;
        // 启动Electron进程
        let electronProcess = spawn(require("electron"), [
          "dist/background.js",
          IP,
        ]);

        // 监听主进程代码的更改
        fs.watchFile("src/background.ts", () => { 
          // 杀死当前的Electron进程
          electronProcess.kill();
          // 重新编译主进程代码并重新启动Electron进程
          initElectron();
          electronProcess = spawn(require("electron"), [
            "dist/background.js",
            IP,
          ]);
        });

        // 监听Electron进程的stdout输出
        electronProcess.stderr?.on("data", (data) => {
          console.log(`日志:${data}`);
        })
      })
    }
  }
}

在src目录下创建background.ts文件 

 background.ts代码

import { app, BrowserWindow } from 'electron'

// 等待Electron应用就绪后创建BrowserWindow窗口
app.whenReady().then(async () => {
    const win = await new BrowserWindow({
        width: 800,
        height: 600,

        // 配置窗口的WebPreferences选项,用于控制渲染进程的行为
        webPreferences: {
            nodeIntegration: true, // 启用Node.js集成
            contextIsolation: false, // 禁用上下文隔离
            webSecurity: false, // 禁用web安全策略
        }
    })
    console.log('----------123-------');
        console.log(process);
    // 根据命令行参数加载URL或本地文件
    if (process.argv[2]) {
        win.loadURL(process.argv[2])
    } else {
        win.loadFile('index.html')
    }
})

vite.config.ts导入文件,添加base:'./'

 在tsconfig.node.json添加plugins文件夹下ts文件的提示

 至此,就可以运行electron项目了;

运行时错误信息:

解决办法:

是因为node13版本以后会使用es module,在package.json中,type改为commonjs即可

 

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

spring复习:(22)实现了BeanNameAware等Aware接口的bean,相应的回调方法是在哪里被调用的?

AbstractAutowireCapableBeanFactory的doCreateBean用来创建bean, 其中调用了initializeBean方法对bean进行初始化 initializeBean包含如下代码: 而invokeAwareMethods代码如下: 可见其分别判断是否实现了BeanNameAware接口、BeanClassLoaderAware接口…

【java】【基础2】程序流程控制

目录 一、最经典的三种执行顺序 二、分支结构 2.1 if 2.2 switch 2.3 if与switch区别 三、循环结构 3.1 for循环 3.2 while循环 3.3 do-while循环 3.4 三种循环区别 3.5 补充知识:死循环 3.6 补充知识:循环嵌套 四、跳转关键字:br…

win7系统电脑怎么在桌面上悬挂工作日程安排清单显示呢?

在现代快节奏的工作环境中,合理安排和管理工作日程是非常重要的。而在电脑桌面上悬挂工作日程安排清单显示,可以让我们随时了解自己的任务和工作进度,提高工作效率。那么,如何在Win7系统电脑上实现这一功能呢? 今天我…

华为云ROMA Connect 的智能集成 – 现代企业数字化转型的新利器

在当今数字信息智能化的时代,人工智能技术逐渐深入企业的生产流程和实践中。人工智能的应用成为现代企业数字化转型的新利器。华为云的ROMA Connect作为企业级的融合集成服务 EiPaaS平台,从今年开始也进入了人工智能技术,针对几个主要的企业集…

selenium测试框架快速搭建(UI自动化测试)

一、介绍 selenium目前主流的web自动化测试框架;支持多种编程语言Java、pythan、go、js等;selenium 提供一系列的api 供我们使用,因此在web测试时我们要点页面中的某一个按钮,那么我们只需要获取页面,然后根据id或者na…

线程池学习(二)execute() 和 submit() 的区别

转载&#xff1a;线程池 线程提交的两种方式 ExecutorService poll3 Executors.newCachedThreadPool();for (int i 0; i < 2; i) {poll3.execute(new TargetTask());poll3.submit(new TargetTask());}execute方法 void execute(Runnable command): Executor接口中的方法s…

VSCode 注释后光标快速定位下一行

VSCode默认用 Ctrl / 注释一行时&#xff0c;光标停留在该行中。下面介绍如何注释后&#xff0c;光标会自动移动到下一行。 1.【View】 ->【Extensions】->【查找并安装Multi-command 扩展】 2.【File 】 -> 【Preferences 】->【Keyboard Shortcuts】&#xff08…

【数据结构】朴素模式匹配 KMP算法

&#x1f387;【数据结构】朴素模式匹配 & KMP 算法&#x1f387; &#x1f308; 自在飞花轻似梦,无边丝雨细如愁 &#x1f308; &#x1f31f; 正式开始学习数据结构啦~此专栏作为学习过程中的记录&#x1f31f; 文章目录 &#x1f387;【数据结构】朴素模式匹配 & K…

物理机传输大文件到虚拟机

物理机快速传输大文件到虚拟机 测试使用Tabby传输大文件到虚拟机 1.1 准备大文件 1.2 通过Tabby上传文件到Linux 总耗时约&#xff1a;7分钟 1.3 通过EveryThing配置服务 打开EveryThing&#xff0c;点击工具—> 选项—>http服务器 启用HTTP服务器&#xff0c;配置…

津津乐道设计模式 - 迭代器模式详解(以购物车的场景来演示迭代器模式)

&#x1f604; 19年之后由于某些原因断更了三年&#xff0c;23年重新扬帆起航&#xff0c;推出更多优质博文&#xff0c;希望大家多多支持&#xff5e; &#x1f337; 古之立大事者&#xff0c;不惟有超世之才&#xff0c;亦必有坚忍不拔之志 &#x1f390; 个人CSND主页——Mi…

前端 | (二)各种各样的常用标签 | 尚硅谷前端html+css零基础教程2023最新

学习来源&#xff1a;尚硅谷前端htmlcss零基础教程&#xff0c;2023最新前端开发html5css3视频 文章目录 &#x1f4da;HTML排版标签&#x1f4da;HTML语义化标签&#x1f4da;块级元素与行内元素&#x1f4da;文本标签&#x1f407;常用的文本标签&#x1f407;不常用的文本标…

高效又安全的企业大数据传输解决方案推荐

在当前的商业领域中&#xff0c;企业大数据传输是一个重要而复杂的问题。随着企业规模和数据量的扩大&#xff0c;如何安全可靠、高效快速地传输大数据成为了许多企业需要面对的挑战。本文将介绍几种值得考虑的企业大数据传输解决方案&#xff0c;以帮助企业有效应对这一挑战。…

Ubuntu22.04密码忘记怎么办 Ubuntu重置root密码方法

在Ubuntu 22.04 或其他更高版本上不小心忘记root或其他账户的密码怎么办&#xff1f; 首先uname -r查看当前系统正在使用的内核版本&#xff0c;记下来 前提&#xff1a;是你的本地电脑&#xff0c;有物理访问权限。其他如远程登录的不适用这套改密方法。 通过以下步骤&#…

OpenCV for Python 学习第五天:图片属性的获取

上一篇博文当中&#xff0c;我们学习了如何获取图片的通道&#xff0c;我们了解了通道的分离方法split()和通道的组合方法merge()。那么我们今天就来对图片的属性做一个深入的了解。 文章目录 图片属性OpenCV中属性介绍图片属性的获取 图片属性 图片属性是指描述和定义一张图片…

Android 网络游戏开发入门简单示例

在Android系统上开发是Android开发学习者所向往的&#xff0c;有成就感也有乐趣&#xff0c;还能取得经济上的报酬。那怎样开发Android网络游戏攻略呢&#xff1f;下面介绍一个简单的入门实例。 一、创建新工程   首先&#xff0c;我们在Eclipse中新建一个名为Movement的工程…

套餐管理模块开发 -- 手把手教你做ssm+springboot入门后端项目黑马程序员瑞吉外卖(六)

文章目录 前言一、新增套餐1. 需求分析2. 数据模型3. 代码开发4. 功能测试 二、套餐信息分页查询1. 需求分析2. 代码开发3. 功能测试 三、删除套餐1. 需求分析2. 代码开发3. 功能测试 总结 前言 为了巩固所学的知识&#xff0c;作者尝试着开始发布一些学习笔记类的博客&#x…

C# 深入理解事件(event)机制

目录 一&#xff0c;引言 二&#xff0c;事件的定义和用法 2.1 同步事件执行 2.2 异步事件执行 2.3 等待异步事件完成 2.4 捕获异常处理中的异常 一&#xff0c;引言 都知道事件的本质是一个多播委托&#xff08;MulticastDelegate)&#xff0c;但对于事件的机制和用法…

S3C2440点亮LED(裸机开发)

文章目录 前言一、环境介绍一、GPIO介绍二、点亮开发板的LED1.预备动作2.led代码 总结 前言 本期和大家主要分享的是使用S3C2440开发板点亮一个LED灯&#xff0c;可能大家拿到开发板之后做的第一件事情都是点灯&#xff0c;这是为什么呢&#xff1f;因为点灯这件事情不仅能够检…

Visual Studio 向工程中添加现有文件夹

前言&#xff1a; 在创建C#类库&#xff08;dll&#xff09;工程后&#xff0c;需要把现有的C#文件添加进工程中 步骤1.将所有文件夹复制到工程中 步骤2. 点击这个图标&#xff0c;显示所有文件夹 工程目录下的所有文件夹都会被显示出来 选中需要添加的文件夹&#xff0c;右…

微信小程序下拉刷新获取数据和触底事件刷新实现

一、下拉刷新 1.json文件 说明&#xff1a;开启下拉刷新&#xff0c;然后设置窗口的背景色&#xff0c;方便观看。 "enablePullDownRefresh": true,"backgroundColor":"#FFC0CB" 2. js文件 说明&#xff1a;重新发起请求&#xff0c;并显示加…