electron+vue3全家桶+vite项目搭建【一】使用开源项目快速搭建基础工程

指引

项目地址
视频讲解

1.创建工程

直接用开源的electron构建脚手架：https://github.com/electron-vite/electron-vite-vue

1.使用命令创建工程

npm create electron-vite

2.输入工程的名称

2.安装依赖

工程下载好后，我们打开工程，并在根目录打开终端，然后安装对应的依赖

1.配置镜像

# 指定 npm 国内镜像
npm config set registry=https://registry.npmmirror.com/
# 指定 Electron 的国内镜像地址
npm config set electron_mirror=https://npmmirror.com/mirrors/electron/

2.安装依赖

npm i

遇到问题：

vite-plugin-electron-renderer 版本找不到，降低一下版本为 0.13.10 即可

3.运行工程

执行dev脚本，运行成功显示如图所示

npm run dev

4.打包工程

执行build脚本，打包工程

npm run build

运行成功后，可以看到根目录下多了一个release目录，如下图所示

其中1.0.0对应package.json中的配置，如下图所示：

• 之后我们进行版本迭代的时候只需要修改version即可打出不通版本的包
• 多个版本的包放在服务器上再结合代码，就可以实现electron的自动更新
• electron+vue3全家桶+vite项目搭建【25】使用electron-updater自动更新应用