在「vite.config.ts」中配置vite-plugin-electron插件入口 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:pack":"electron-builder --dir","electron:dev":"concurrently -k \"cross-env BROWSER=none yarn dev\" \"yarn electron\"","app:build":"yarn build:for:electron && yarn electron:builder"},
import{ app, BrowserWindow }from'electron'importpath, { dirname }from'node:path'import{ fileURLToPath }from'node:url'importisDevfrom'electron-is-dev'// ESM(ECMAScript Module)环境中,__dirname 和 __filename 这两个全局变量是未定义的,需要手动定义:获取文件所在目录const__dirname = dirname(fileUR...
Electron 需要单独的main.js 和 index.html 来启动桌面程序, 其中包括构建好的Vue工程。 构建我们的Vue3 应用程序 由于我们的Vite 加 Vue3 项目,使用了一些其他技术,所以我们在部署Web 应用的时候需要先构建。 在Electron 项目中,也是同样的道理,我们需要先构建我们的Vue3 + vite 的项目。 因为我们的希望构建完...
vite: ^4.3.2vue:^3.2.47electron:^24.4.0electron-builder: ^23.6.0 创建vite4+vue3项目 vite官网提供了npm/yarn/pnpm等方式创建vue3项目。 yarn create vite electron-vite4-vue3 cd electron-vite4-vue3 yarn install yarn dev 到这里一个简单的vite3+vue3项目就初始化好了。
配置好之后就可以直接在vue中使用elementplus组件 集成axios npm install axios@0.27.2 #src\api\index.ts import axios from 'axios' const instance = axios.create({ baseURL: '/api', timeout: 1000, headers: {'X-Custom-Header': 'foobar'} ...
得益于 Vite 卓越的前端开发体验,越来越多的 Electron 项目也开始应用它来构建开发。翻阅各种社区资源可以发现很多基于 Vite 搭建的 Electron 开发模板,但都存在着一些共同的问题: 配置相对复杂,繁琐 需要辅助脚本来配合编译开发 无法举一反三,自主选择前端框架(Vue、React 和 Svelte 等) 无法保护源代码 旨在解决这些...
学习Electron入门到精通,掌握Vue3+Vite搭建脚手架项目 #前端 #electron #electron-builder #代码 - 李钟意讲前端于20230601发布在抖音,已经收获了8.7万个喜欢,来抖音,记录美好生活!
目录 前言: 准备工作: 架构设计: 基本代码: 代码结构: 主进程(main.js): 子进程: 工具函数: 消息中心: electron模块: 在vue的全局调用上述几个函数: 脚本: 问题避坑: 搭建上述软件时遇到以下问题: 总结: 前言: 随着前端...
【win&mac】30分钟学会Vite创建和打包Electron+Vue3,前端跨平台桌面应用零基础入门教程【2024新版ESM规范】共计6条视频,包括:1.基于 Vite 创建 Vue3 项目、2.安装和配置 Electron、3.兼容 mac等,UP主更多精彩视频,请关注UP账号。