Vite + Electron ✨

前言

在vite刚出不久的时候我正好准备写一个桌面程序，思来想去（其实根本没犹豫）选择用electron，下面让我们来看看怎么使用vite结合使用它们。

思路

我这里的思路主要就是两个项目都跑起来然后主进程监听渲染进程的地址就可以。

具体实现分以下几个步骤：

两个项目同时运行
主进程监听vite运行后的ip地址
修改vite默认加载路径
修改vite打包后路径
修改打包后资源引用路径

准备工作

这里需要做点准备工作，安装两个用到的依赖包：

npm i concurrently -D 自定义script命令
npm i electron-reloader -D electron热更新
打包这里选用的electron-packager

好了，到这里我们就可以动手忙活了。

实现

首先创建一个vite项目

npm init vite-app vite-electron

cd到项目里执行yarn

然后src下新建两个目录，分别为 main 和 render， main是用于存放主进程js文件的，render用于渲染进程。

修改配置文件vite.config.js

import { join } from 'path'

const config = {  
  root: join(__dirname,'./src/render'), // 加载文件入口
  base: './',  // 
  outDir: join(__dirname,'./dist') // 输出位置
}

export default config

然后在package.json的script中添加这两条命令：

"dev": "concurrently -n=vue,ele -c=green,blue \"vite\" \"electron .\"" ,
"build:all": "concurrently -n=vue:build,ele:build -c=green,blue \"vite build\" \"electron-packager . vite-electron --platform=win32 --electron-version=11.0.4 --arch=x64 --download.mirrorOptions.mirror=https://npm.taobao.org/mirrors/electron/ --asar --app-version=0.0.0 --build-version=0.0.0 --out ./dist/vite-electron --overwrite --no-package-manager --ignore=(.git)  --icon=logo.ic\""

打包的命令有点长，大家要复制全，这里面 -n的参数终端窗口显示的标题前缀名，-c是对应的颜色，我这里把vue改为绿色，electron改为蓝色。

electron-packager参数有点多就不一一说了，这里列举几个比较重要的参数：

electron-packager . vite-electron 点后面跟的第一个参数名是项目名或者别的什么的自定义的名字
--out ./dist/myelectron 打包输出位置和文件名
--electron-version=11.0.4 指定你的electron版本号不能乱填

记得打包的时候在主进程里面修改一下读取资源的路径，改成打包后的。

还需要把package.json的main的路径改成你的主进程文件路径，比如我这里是：

./src/main/main.js

热更新

electron-reloader配置热更新只需要在主进程文件加入以下代码即可：

try {  require('electron-reloader')(module)} catch (_) {}

结语

到这里就搭建好我们的项目了是不是很简单，接下来就可以发挥你的想(sao)象(cao)力(zuo)做一个自己喜欢的桌面应用了。

这个项目在我的github上有现成的模板，可以去克隆下来开箱即用。在我主页右上角是个人博客，里面会持续记录所思、所想、所学，感兴趣可以看一下，一起进步。