base: path.resolve(__dirname,'./dist/'),//新增plugins: [vue()] }) (2)index.js 创建一个新的文件index.js,需要注意的是,该内容中index.html的加载路径跟electron官网给的配置不同 //main.js//控制应用生命周期和创建原生浏览器窗口的模组const { app, BrowserWindow } = require('electron') const ...
在「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-devtools-installer:electron开发工具 vite-plugin-electron插件是将 vite 和 electron 结合在一起的,可以让我们非常方便的结合 electron 和 vue,需要做一些指定的配置。 初始化electron项目 新建目录文件electron-main/index.ts主进程目录和文件、electron-preload/index.ts预加载目录和文件 // electron-main/ind...
"app:build": "yarn build:for:electron && yarn electron:builder" }, 添加main节点 {"main":"electron/electron.js",} 第4 步:编辑vite.config.js import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'// https://vitejs.dev/config/exportdefaultdefineConfig({base:process.env.ELECTRON=="...
electron-preload:预加载代码目录,主要是定义桥接通信 其他文件:也就是 vue 初始化后的目录 目录结构这么设计的原因是因为我们使用的 vite-plugin-electron 插件需要使用这样的目录结构,目前还没有提供设置修改。 初始化项目目录 下面就开始初始项目 代码语言:javascript ...
electron-preload:预加载代码目录,主要是定义桥接通信。 其他文件:也就是 vue 初始化后的目录。 目录结构这么设计的原因是因为我们使用的 vite-plugin-electron 插件需要使用这样的目录结构,目前还没有提供设置修改。 初始化项目目录 下面就开始初始项目:
vite-plugin-electron插件是将 vite 和 electron 结合在一起的,可以让我们非常方便的结合 electron 和 vue,需要做一些指定的配置。 初始化electron项目 新建目录文件electron-main/index.ts主进程目录和文件、electron-preload/index.ts预加载目录和文件 // electron-main/index.tsimport{ app,BrowserWindow}from'electro...
electron-devtools-installer:electron 开发工具 vite-plugin-electron插件是将 vite 和 electron 结合在一起的,可以让我们非常方便的结合 electron 和 vue,需要做一些指定的配置。 初始化electron项目 新建目录文件electron-main/index.ts主进程目录和文件、electron-preload/index.ts预加载目录和文件 ...
Electron 需要单独的main.js 和 index.html 来启动桌面程序, 其中包括构建好的Vue工程。 构建我们的Vue3 应用程序 由于我们的Vite 加 Vue3 项目,使用了一些其他技术,所以我们在部署Web 应用的时候需要先构建。 在Electron 项目中,也是同样的道理,我们需要先构建我们的Vue3 + vite 的项目。
yarncreate @quick-start/electron 中间会有几个选项 代码语言:shell 复制 ? Add TypeScript? » No / Yes 是否使用TypeScript?如果喜欢TypeScript,请选择Yes。 ? Add Electron updater plugin? » No / Yes 是否添加Electron updater插件?选择Yes。