在Vue3、Vite和Electron的组合下开发桌面程序是一个相对复杂但功能强大的方案。以下是一个分步骤的指南,帮助你理解并构建这样的项目: 1. 创建Vue3+Vite项目 首先,你需要使用Vite来创建一个Vue3项目。可以通过以下命令完成: bash npm create vite@latest 在提示中输入项目名称,并选择Vue作为框架。这将生成一个基本...
安装electron-devtools-installer用于开发调试electron npm install -D electron-devtools-installer 用vite构建electron应用程序需要一个vite插件 npm install -D vite-plugin-electron 创建项目入口——主进程 electron引入成功了,可以开始写electron的相关代码了,新建一个src-electron文件用来写electron的代码,在它下面创建一...
start先打包成静态文件,再启动electron加载本地文件,预打包前的预览 dev先启动本地服务器,再启动electron加载服务页面,开发时使用 json 复制代码 { "name": "electron-app", "version": "1.0.0", "description": "An Electron application with Vue", "main": "./out/main/index.js", "author": "example...
start先打包成静态文件,再启动electron加载本地文件,预打包前的预览 dev先启动本地服务器,再启动electron加载服务页面,开发时使用 {"name":"electron-app","version":"1.0.0","description":"An Electron application with Vue","main":"./out/main/index.js","author":"example.com","homepage":"https://...
1、执行如下命令创建一个新的Vite项目: $ yarn create vite 输入项目名称:electron-client,选择框架:Vue,之后选择使用JavaScript。 2、进入项目根目录: $cdelectron-client 3、安装项目依赖: $ yarn add --dev electron concurrently cross-env electron-builder wait-on ...
一开始用Electron-builder打包的过程中,它打包的过程中会有报错。后面用管理员权限运行命令行后,打包就没有报错,直接成功。双击打包后的程序进行安装,安装完成后,会发现系统内所有的快捷方式、所有的exe程序打开都是我这个新开发的程序。打开cmd是它,打开注册表也是它,打开任何一个exe程序都是它。和IT同事搞了很久没...
Electron 需要单独的main.js 和 index.html 来启动桌面程序, 其中包括构建好的Vue工程。 构建我们的Vue3 应用程序 由于我们的Vite 加 Vue3 项目,使用了一些其他技术,所以我们在部署Web 应用的时候需要先构建。 在Electron 项目中,也是同样的道理,我们需要先构建我们的Vue3 + vite 的项目。
一说到创建桌面应用,就不得不提及Electron和Tauri框架。这次给大家主要分享的是基于electron最新版本整合vite4.x构建vue3桌面端应用程序。 之前也有使用vite2+vue3+electronc创建桌面端项目,不过vue-cli-plugin-electron-builder脚手架插件构建的项目electron版本只有13.x。如今electron版本都到了24,显然不能再用之前的方...
Vite+Electron快速构建一个VUE3桌面应用(三)——打包 二. 思路 先说结论,重点还是在于mainWindow.loadURL()。 打包后还是加载http://localhost:3000是无法运行的,因此,此处需要先用vite打包好,然后使用electron-builder加载vite打包后的文件进行打包。 为了代码能够根据不同环境在运行时加载http://localhost:3000,在...