开发新版本 Vue 项目推荐你使用 Vite 脚手架构建开发环境，然而 Vite 脚手架更倾向于构建纯 Web 页面，而不是桌面应用，因此开发者要做很多额外的配置和开发工作才能把 Electron 引入到 Vue 项目中，这也是很多开发者都基于开源工具来构建 Electron+Vue 的开发环境的原因。
但这样做有两个问题：第一个是这些开源工具封装了很多技术细节，导致开发者想要修改某项配置非常不方便；另一个是这些开源工具的实现方式我认为也并不是很好。
所以，我还是建议你尽量自己写代码构建 Electron+Vue 的开发环境，这样可以让自己更从容地控制整个项目。
具体应该怎么做呢？接下来我将带你按如下几个步骤构建一个 Vite+Electron 的开发环境：
创建项目
首先通过命令行创建一个 Vue 项目：
npm create vite@latest electron-jue-jin -- --template vue-ts
接着安装 Electron 开发依赖：文章来源：https://www.toymoban.com/news/detail-423963.html
npm install electron -D
安装完成后，你的项目根目录下的 package.json 文件应该与下面大体类似：文章来源地址https://www.toymoban.com/news/detail-423963.html
{
"name": "electron-jue-jin",
"private": true,
到了这里，关于如何开发 Vite 3 插件构建 Electron 开发环境？（文末附视频讲解）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
