"type":"commonjs","scripts": {"dev":"chcp 65001&&vite","build":"vue-tsc && vite build","preview":"vite preview","electron:dev":"chcp 65001&&vite --config vite.config.electron.ts"},"dependencies": {"vue":"^3.3.4"},"devDependencies": {"@vitejs/plugin-vue":"^4.2.3...
使用Electron和Vite进行项目打包是一个相对复杂但常见的任务,以下是一个详细的步骤指南,帮助你完成这一过程: 1. 安装并配置Electron和Vite环境 首先,你需要确保你的开发环境中已经安装了Node.js和npm(或yarn)。然后,你可以使用以下命令来初始化一个新的Node.js项目并安装Electron和Vite: bash mkdir my-electron-vit...
可通过vite-plugin-environment插件在主进程中直接把环境变量编译为常量 vite.main.config.ts main.ts(编译前) main.ts(编译后) 应用配置 在forge.config.ts中可配置应用名称、版本号、资源是否打包等 constconfig:ForgeConfig={packagerConfig:{asar:true,appVersion:process.env.APP_VERSION,name:process.env.APP_...
插件的功能是拦截 import electron from 'electron' 并返回正确的 ESM 格式代码,我们先创建好 electron.js 模板代码;然后使用 resolve.alias 对其进行拦截 import { resolve } from 'path' import { writeFileSync } from 'fs' export default { plugins: [{ name: 'vite-plugin-electron/renderer', config(co...
npm install -Dvite-plugin-electron 创建项目入口——主进程 electron引入成功了,可以开始写electron的相关代码了,新建一个src-electron文件用来写electron的代码,在它下面创建一个main.ts文件 用来写主进程代码 // src-electron/main.js const { app, BrowserWindow } = require('electron') ...
简而言之,vite-plugin-electron-renderer职责是填充 Electron, Node.js 内置模块。 English| 简体中文 原理 加载Electron、Node.js CJS 包/内置模块/electron (示意图) ┏———┓ ┏———┓ │import{ ipcRenderer }from'electron'│ │ Vite dev server │ ┗———┛ ┗———┛ │ │ │1.Pre-Bundli...
vite-plugin-electron 一个使用electron-builder构建electron应用程序的vite插件 仅需少量配置,即可快速整合vite electron开发环境。 特性 默认支持模块热替换(方便开发) 默认支持打包静态资源(图片,视频等) 支持.node模块打包 渲染进程支持node模块 安装 npm i --save-dev @xyh19/vite-plugin-electron# oryarn add -...
一. 简介 上一篇文章Vite+Electron快速构建一个VUE3桌面应用(二)——动态模块热重载完成了开发时的动态模块热重载功能,现在是时候来看看怎么完成最后一步——打包了。 源码:https://github.com/Kuari/Blog/tree/master/Examples/vite_electron/vite_electron_3 系列文章:
vue3作为国内主流开发框架,而vite又是vue团队推荐打包工具,在大多数的项目中都是部署在服务器上,通过http://协议访问ip、域名,但是在一些混合式开发如android或者electron中需要提供的html页面,然后使用file://协议访问。在这样的背景下就需要我们使用vite打包vue3项目支持file://协议访问。通过查找相关资料实现逻辑主要...