在「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:...
先用Vite创建一个Vue3的工程,这就是你的实际项目工程 接着安装几个Electron相关的依赖,最终我的工程下的依赖情况如下: 代码语言:javascript 复制 "@vue/compiler-sfc":"^3.0.0","vite":"^1.0.0-rc.9","vue":"^3.0.2","vue-router":"^4.0.0-rc.1","electron":"^11.0.2","electron-builder":"^...
"start": "electron-vite preview", "dev": "electron-vite dev", "build": "electron-vite build", "postinstall": "electron-builder install-app-deps", "build:win": "npm run build && electron-builder --win --config", "build:mac": "npm run build && electron-builder --mac --config",...
首先编译Vue程序,如下: 1 2 3 npm run build #用于加载本地页面 #或 npm run dev #用于加载Web服务页面 之后启动Electron App,如下: 1 npm run electron:dev 这样我们就可以将Electron App运行起来了。 调试 编写代码就绕不开调试,对于Electron App的调试有两种方式,一种是通过浏览器调试,对于Web前端开发人员...
1、执行如下命令创建一个新的Vite项目: $ yarn create vite 输入项目名称:electron-client,选择框架:Vue,之后选择使用JavaScript。 2、进入项目根目录: $cdelectron-client 3、安装项目依赖: $ yarn add --dev electron concurrently cross-env electron-builder wait-on ...
【win&mac】30分钟学会Vite创建和打包Electron+Vue3,前端跨平台桌面应用零基础入门教程【2024新版ESM规范】共计6条视频,包括:1.基于 Vite 创建 Vue3 项目、2.安装和配置 Electron、3.兼容 mac等,UP主更多精彩视频,请关注UP账号。
一说到创建桌面应用,就不得不提及Electron和Tauri框架。这次给大家主要分享的是基于electron最新版本整合vite4.x构建vue3桌面端应用程序。 之前也有使用vite2+vue3+electronc创建桌面端项目,不过vue-cli-plugin-electron-builder脚手架插件构建的项目electron版本只有13.x。如今electron版本都到了24,显然不能再用之前的方...
第4 步:编辑vite.config.js import{ defineConfig }from'vite'importvuefrom'@vitejs/plugin-vue'// https://vitejs.dev/config/exportdefaultdefineConfig({base: process.env.ELECTRON=="true"?'./':"",plugins: [vue()] }) 因为base的设置在ELECTRON环境下与网站不同。
学习Electron入门到精通,掌握Vue3+Vite搭建脚手架项目 #前端 #electron #electron-builder #代码 - 李钟意讲前端于20230601发布在抖音,已经收获了8.7万个喜欢,来抖音,记录美好生活!