Vite ❤ Electron——基于Vite搭建Electron+Vue3的开发环境【一】

背景

目前社区两大Vue+Electron的脚手架：electron-vue和vue-cli-plugin-electron-builder，

都有这样那样的问题，且都还不支持Vue3，然而Vue3已是大势所趋，

Vite势必也将成为官方Vue脚手架，

下图是尤雨溪在开发好Vite之后与webpack之父的对话

 

 所以开发一个Vite+Vue3+Electron的脚手架的需求日趋强烈

我前段时间做了一个，

但是发现了一些与Vite有关的问题，

比如：Vite会把开发环境的process对象吃掉的问题

这对于web项目来说问题不大，但对于我们的Electron项目来说，就影响很大了

今天我就把这个思路和实现方式的关键代码发出来供大家参考，

同时也希望Vue社区的贡献者们，能注意到这个问题

（给Vue官方的各个项目提issue真的是太难了，Electron官方项目在这方面就做的很好，很open、很包容）

环境

先用Vite创建一个Vue3的工程，这就是你的实际项目工程

接着安装几个Electron相关的依赖，最终我的工程下的依赖情况如下：

"@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": "^22.9.1",
"electron-updater": "^4.3.5",
"postcss-scss": "^3.0.2",
"sass": "^1.27.0",

注意：这些依赖全部安装在devDependencies下

各个库的版本发文时应该是最新的了，不过如果有更新的版本，你完全可以用，没影响。

工程的目录结构大概是如下这样：

[yourProject]

　　node_modules　　依赖包

　　public　　vite创建的目录，为vue服务的，实际没多大用

　　release　　打包后编译输出的目录，该目录的根目录下存放打包后的安装包

　　　　bundled　　该目录存放vue打包后的文件（html js css img等）

　　　　win-unpacked　　该目录存放编译后生成的可执行文件及相关的dll，不包含安装包

　　resource　　资源目录

　　　　unrelease　　该目录存放编译期需要的资源

　　　　release　　　该目录