electron-vite vue 无法自动热更新解决方案
截止 2024 年 8 月 21 日,按照官方文档的操作, electron-vite 并不能实现自动热更新,就是修改一个字符保存就希望重新加载应用,electron-vite 没有原生提供,或者提供了配置不生效。
解决方案
其实我们可以换一个思路,就是 node.js 开发的时候,我们修改了 node.js 代码,都希望可以重新加载 node 进程,那么有一个库可以做到就是 nodemon。
现在可以把这个问题转变成,nodemon 指定目录 src/ 下的所有文件修改都重新启动一个命令
,这个命令你可以理解成 node 进程命令,换句话来说,就是启动 electron-vite dev
的命令。
所以我们可以这么做:
1. 安装 nodemon
bash
npm install nodemon -D --registry=https://registry.npmmirror.com
2. 添加 nodemon 监听的命令
package.json
json
{
"scripts": {
"format": "prettier --write .",
"lint": "eslint . --ext .js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
"start": "electron-vite preview",
"dev": "nodemon --watch src/ --exec electron-vite dev",
"build": "electron-vite build",
"postinstall": "electron-builder install-app-deps",
"build:unpack": "npm run build && electron-builder --config --dir",
"build:win": "npm run build && electron-builder --win",
"build:mac": "npm run build && electron-builder --mac",
"build:linux": "npm run build && electron-builder --linux"
}
}
3. 重新运行
bash
npm run dev
现在你尝试修改 src 目录任意一个文件都会重新执行 electon-vite,完美实现我们的效果
使用 nodemon 解决 electron-vite 没有自动热更新的问题
DANGER
不要尝试开发中把日志文件写入到 src/目录下,会导致你的项目开发环境一直自动更新,因为只要文件发生了改变就会自动执行 electron-vite dev
命令,如果你一定要写入,请一定使用 nodemon 配置忽略相关后缀的文件。
emm....
这是相关的文档或者文章
https://github.com/alex8088/electron-vite/issues/7