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

1.创建工程直接用开源的electron构建脚手架：https://github.com/electron-vite/electron-vite-vue使用命令创建工程这是我的一个技术博客网站，主要目地是为了方便自己整理基础知识应用与收集常见技术问题，以便后面出现同样问题可以直接解决；

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.npm.taobao.org/
# 指定 Electron 的国内镜像地址
npm config set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/

2.安装依赖

npm i

3.如果npm下载出错，可以使用cnpm进行安装

# 安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org 
# 使用cnpm安装依赖
cnpm 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的自动更新

相关阅读

推荐文章

热门文章