vite+vue3+electron开发环境搭建

环境

node 18.14.2
yarn 1.22

项目创建

yarn create vite test01

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

安装vue环境

cd test01
yarn
yarn dev

在这里插入图片描述
在这里插入图片描述
说明vue环境搭建成功

安装electron

# 因为有的版本会报错所以指定了版本
yarn add electron@26.1.0 -D

安装vite-plugin-electron

yarn add -D vite-plugin-electron

根目录下新建electron/main文件夹,然后新建index.ts

import { app, BrowserWindow } from "electron";app.whenReady().then(() => {const win = new BrowserWindow({title: "Main window",});//当使用vite启动项目的时候会存在VITE_DEV_SERVER_URL这个环境变量if (process.env.VITE_DEV_SERVER_URL) {win.loadURL(process.env.VITE_DEV_SERVER_URL);} else {//或者加载打包好的htmlwin.loadFile("dist/index.html");}
});

vite.config.ts修改代码

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: "electron/main/index.ts",}),],
});

package.json删除 "type": "module",
增加 "main": "dist-electron/index.js",

安装vite-plugin-electron-renderer

yarn add vite-plugin-electron-renderer -D

修改vite.config.ts

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import electron from "vite-plugin-electron";
import renderer from "vite-plugin-electron-renderer";// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),electron({entry: "electron/main/index.ts",}),renderer(),],
});

查看结果

yarn dev

在这里插入图片描述

打包

# C:\Users\16471\.npmrc 修改npmrc ELECTRON_MIRROR https://npmmirror.com/mirrors/electron/
# electron-forge更快但是不稳定,选择electron-builder
yarn add electron-builder -D

electron-builder文档
修改package.json下的build命令

"build": "vue-tsc --noEmit && vite build && electron-builder",

修改electron/main/index.ts

import { app, BrowserWindow } from "electron";
import { join } from "node:path";process.env.DIST_ELECTRON = __dirname;//join(__dirname, "..");
process.env.DIST = join(process.env.DIST_ELECTRON, "../dist");
process.env.VITE_PUBLIC = process.env.VITE_DEV_SERVER_URL? join(process.env.DIST_ELECTRON, "../public"): process.env.DIST;const indexHtml = join(process.env.DIST, "index.html");app.whenReady().then(() => {const win = new BrowserWindow({title: "Main window",});//当使用vite启动项目的时候会存在VITE_DEV_SERVER_URL这个环境变量if (process.env.VITE_DEV_SERVER_URL) {win.loadURL(process.env.VITE_DEV_SERVER_URL);} else {//或者加载打包好的htmlwin.loadFile(indexHtml);}
});

新建electron-builder.json

{"$schema": "https://raw.githubusercontent.com/electron-userland/electron-builder/master/packages/app-builder-lib/scheme.json","appId": "test01","asar": true,"productName": "test01","directories": {"output": "release/${version}"},"files": ["dist","dist-electron"],"mac": {"target": ["dmg"],"artifactName": "${productName}-Mac-${version}-Installer.${ext}"},"win": {"target": [{"target": "nsis","arch": ["x64"]}],"artifactName": "${productName}-Windows-${version}-Setup.${ext}"},"nsis": {"oneClick": false,"perMachine": false,"allowToChangeInstallationDirectory": true,"deleteAppDataOnUninstall": false},"linux": {"target": ["AppImage"],"artifactName": "${productName}-Linux-${version}.${ext}"}
}

运行打包命令

yarn build

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
electron-builder配置

参考

https://github.com/electron-vite/vite-plugin-electron-renderer
https://github.com/electron-vite/vite-plugin-electron
https://zhuanlan.zhihu.com/p/497638546
https://blog.csdn.net/s5s5s5s5s/article/details/127587408
https://cn.vitejs.dev/guide/env-and-mode.html
https://juejin.cn/post/7170843707217412126

快捷方式https://github.com/electron-vite/electron-vite-vue

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

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

相关文章

【微软技术栈】C#.NET 中的管道操作

C#.NET 管道为进程间通信提供了平台。 管道分为两种类型: 匿名管道。 匿名管道在本地计算机上提供进程间通信。 与命名管道相比,虽然匿名管道需要的开销更少,但提供的服务有限。 匿名管道是单向的,不能通过网络使用。 仅支持一个服…

C++赋值运算符重载

c编译器至少给一个类添加4个函数 默认构造函数(无参,函数体为空)默认析构函数(无参,函数体为空)默认拷贝构造函数,对属性进行值拷贝赋值运算符 operator, 对属性进行值拷贝 如果类中有属性指向堆区,做赋值操作时也会出现深浅拷贝…

杭州-区块链前瞻性论坛邀请函​

2023密码与安全前瞻性论坛邀请函 生成合法节点或非法节点,测试共识协议

Leetcode -2

Leetcode Leetcode -263.丑数Leetcode -268.丢失的数字 Leetcode -263.丑数 题目:丑数就是只包含质因数 2、3 和 5 的正整数。 给你一个整数 n ,请你判断 n 是否为 丑数 。如果是,返回 true ;否则,返回 false 。 示例…

若依框架数据源切换为pg库

一 切换数据源 在ruoyi-admin项目里引入pg数据库驱动 <dependency><groupId>org.postgresql</groupId><artifactId>postgresql</artifactId><version>42.2.18</version> </dependency>修改配置文件里的数据源为pg spring:d…

【AD封装】芯片IC-SOP,SOIC,SSOP,TSSOP,SOT(带3D)

包含了我们平时常用的芯片IC封装&#xff0c;包含SOP,SOIC,SSOP,TSSOP,SOT&#xff0c;总共171种封装及精美3D模型。完全能满足日常设计使用。每个封装都搭配了精美的3D模型哦。 ❖ TSSOP和SSOP 均为SOP衍生出来的封装。TSSOP的中文解释为&#xff1a;薄的缩小型 SOP封装。SSO…

TableUtilCache:针对CSV表格进行的缓存

TableUtilCache:针对CSV表格进行的缓存 文件结构 首先来看下CSV文件的结构&#xff0c;如下图&#xff1a; 第一行是字段类型&#xff0c;第二行是字段名字&#xff1b;再往下是数据。每个元素之间都是使用逗号分隔。 看一下缓存里面存储所有表数据的字段 如下图&#xff…

Consistency Models 阅读笔记

Diffusion models需要多步迭代采样才能生成一张图片&#xff0c;这导致生成速度很慢。Consistency models的提出是为了加速生成过程。 Consistency models可以直接一步采样就生成图片&#xff0c;但是也允许进行多步采样来提高生成的质量。 Consistency models可以从预训练的扩…

AI创作系统ChatGPT网站源码/支持DALL-E3文生图/支持最新GPT-4-Turbo模型+Prompt应用

一、AI创作系统 SparkAi创作系统是基于OpenAI很火的ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统&#xff0c;支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如…

C#WPF数据模板应用实例

一、数据模板定义 数据模板是一块定义如何显示绑定的数据对象的XAML标记。 有两种类型的控件支持数据模板: 1、内容控件 通过ContentTemplate属性支持数据模板。内容模板用于显示任何放置在Content属性中的内容。 2、列表控件(继承自ItemsControl类的控件) 通过ItemsTem…

tomcat8.5处理get请求时,控制台输出中文乱码问题的解决

问题描述 控制台输出中文乱码 版本信息 我使用的是tomcat8.5 问题解决 配置web.xml 注&#xff1a;SpringMVC中处理编码的过滤器一定要配置到其他过滤器之前&#xff0c;否则无效 <!--配置springMVC的编码过滤器--> <filter><filter-name>CharacterEn…

11月18日,每日信息差

今天是2023年11月18日&#xff0c;以下是为您准备的11条信息差 第一、香港空运物流能力大幅提升 第二、小米汽车已完成部分城市门店店长培训&#xff0c;每月薪资最高达3.5万元 第三、重庆东方雨虹生产研发物流基地屋顶光伏电站项目并网发电。据测算&#xff0c;项目建成后年…

数据分析思维与模型:多维度拆解分析法

多维度拆解分析法"&#xff08;Multi-Dimensional Analysis and Decomposition Method&#xff09;是一种用于深入分析和解决复杂问题的方法论。这种方法侧重于从多个角度或维度来考察问题&#xff0c;以便于更全面地理解和解决它们。它通常包括以下几个步骤&#xff1a; …

紫色调城市和奔跑人物剪影背景工会工作总结汇报PPT模板

这是一套紫色调城市和奔跑人物剪影背景工会工作总结汇报PPT模板&#xff0c;共33页&#xff1b; PPT模板封面&#xff0c;使用了蓝天白云、城市剪影、奔跑人物剪影背景图片。中间填写工会工作总结汇报PPT标题。界面色彩丰富充满活力。 PowerPoint模板内容页&#xff0c;由31张…

麒麟 ZYJ 服务器软件适配 参考示例

一、zyj 环境简介 1. ZYJ 概述 国产化 SMZYJ 是由国家 BM 主管部门鉴定并批准生产使用的国内自主开发的 整机 JM 国标设备&#xff0c;设备采用了自主设备基础硬件&#xff08;飞腾、国科微等&#xff09;、安全硬 件自主固件&#xff08;昆仑等&#xff09;自主 SM 专用操作…

Unity中Shader立方体纹理Cubemap

文章目录 前言一、什么是立方体纹理二、立方体纹理的生成方式1、使用6个面的生成方式2、使用单张图片的生成方式 三、Cubemap的采样方式四、在Unity中看一下Cubemap五、在Shader中&#xff0c;对立方体纹理进行采样使用1、我们在属性面板定义一个Cube类型的变量来存放立方体纹理…

TCP中发送数据的情况

发送窗口和接收窗口的本质&#xff0c;可以叫做“TCP 的生产者 - 消费者”模型&#xff0c;这个只是单个网络连接的数据传输。发送窗口相当于生产者&#xff0c;接收窗口相当于消费者。TCP必须考虑多个连接共享在有限的带宽上&#xff0c;兼顾效率和公平性的控制&#xff0c;而…

WPF Visual, UIElement, FrameworkElement, Control这些类的区别

在WPF (Windows Presentation Foundation) 中&#xff0c;Visual, UIElement, FrameworkElement, 和 Control 这些类是一个类层次结构&#xff0c;它们分别在 WPF 的 UI 元素和控件模型中提供了不同级别的功能。下面是这些类的详细介绍&#xff1a; Visual&#xff1a;这是所有…

GetKeyState获取键盘状态(原神水龙王转转转)

先上代码&#xff1a; #include<iostream> #include<Windows.h> int main(){std::cout << "按住鼠标侧键开始旋转&#xff0c;记得要以管理员身份运行&#xff01;\n";while(true){if(GetKeyState(VK_XBUTTON1) < 0){std::cout << "…