import{ defineConfig }from'vite';importvuefrom'@vitejs/plugin-vue';exportdefaultdefineConfig({plugins: [vue()],build: {outDir:'dist', }, }); 3. 配置 Electron 在项目根目录下创建main.js文件,这是 Electron 的主进程文件: const{ app,BrowserWindow} =require('electron');constpath =require('p...
在「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:...
要将现有的Vue 3 + TypeScript + Vite项目集成到Electron中,你可以按照以下步骤进行: 1. 安装Electron及相关依赖 首先,你需要在你的Vue 3项目中安装Electron及其相关依赖。打开终端,在项目根目录下运行以下命令: bash npm install electron --save-dev 同时,你还需要安装electron-builder来简化打包过程: bash npm...
npm install --save-dev vue-cli-plugin-electron-builder vue add electron-builder 配置Electron:在vue.config.js或electron-builder.config.js中配置Electron启动参数、打包选项等。 开发应用:编写Vue组件和逻辑,利用Electron的API访问系统资源。 调试与测试:利用Electron提供的调试工具或Vite的热模块替换功能进行快速开...
Electron 相关放在electron Vue + Vite 作为前端经常使用的,简单提一下 执行创建 Vue 项目指令 npm create vue@latest 创建一个包含Vue + Vite + TS + Pinia + ESLint + Prettier的项目 Vue3.4 至于标题特地指出Vue3.4版本,主要是新出的几个特性比较香,这里简单提一下 ...
新建electron-main/index.ts文件 import { app, BrowserWindow } from "electron"; import* as path from "path";//本地启动的vue项目路径const localAddress = "http://localhost:5173";//创建一个新的窗口const createWindow = () =>{ const win=newBrowserWindow({ ...
目前社区两大Vue+Electron的脚手架:electron-vue和vue-cli-plugin-electron-builder, 都有这样那样的问题,且都还不支持Vue3,然而Vue3已是大势所趋, Vite势必也将成为官方Vue脚手架, 下图是尤雨溪在开发好Vite之后与webpack之父的对话 所以开发一个Vite+Vue3+Electron的脚手架的需求日趋强烈 ...
Vue 3.2.47 Yarn 1.22.18 开发步骤 1、执行如下命令创建一个新的Vite项目: $ yarn create vite 输入项目名称:electron-client,选择框架:Vue,之后选择使用JavaScript。 2、进入项目根目录: $cdelectron-client 3、安装项目依赖: $ yarn add --dev electron concurrently cross-env electron-builder wait-on ...
构建我们的Vue3 应用程序 由于我们的Vite 加 Vue3 项目,使用了一些其他技术,所以我们在部署Web 应用的时候需要先构建。 在Electron 项目中,也是同样的道理,我们需要先构建我们的Vue3 + vite 的项目。 因为我们的希望构建完之后的 js 和 css 相关素材的引用路径在 Electron 中是正确的,所以我们的构建脚本文件需要...
npm init electron-app@latest my-new-app -- --template=vite 1. Vue3 添加vue依赖 复制 npm install--save vue 1. 修改Vite配置 脚手架生成的Vite配置文件有三个,分别是vite.main.config.mjs、vite.reload.config.mjs和vite.renderer.config.mjs。这里修改vite.renderer.config.mjs如下。