Electron Vue3开发跨平台桌面应用

Vue CLI Plugin Electron Builder

目前社区在维护 基于vue-cli

~~ electron-vue ~~

社区不在维护 版本为 electron 2.0 可手动更新至4.0  ** 不推荐**

环境搭建和项初始化

1、 安装 Node.js 坏境
2、 安装 Vue Cli
3、 安装 淘宝镜像 cnpm ( 因 electron 包 特别大 需要等待很长时间 ) 第三步可省略
也可全局安装electron cnpm install electron -g
4、搭建vue 环境
使用 vue-cli 搭建基础 vue框架

vue create xxxx

选择Manually select features
不采用history 模式 构建electron应用会出现问题
配置如下：

? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with: 3.x (Preview)
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? (y/N) n

cd xxxx

vue项目中添加 electron 模块

vue add electron-builder
选择最新版本即可
在这个过程中，由于网络的原因，Electron可能会安装失败，这时候如果node_modules文件夹中已经有electron文件夹（该文件夹是不完整的electron包，不能运行），那么删除这个文件夹，然后可以使用cnpm重新安装electron
cnpm i electron —S

启动

npm run electron:serve

初始的项目目录

 渲染进程的页面交给了vue进行渲染，开发过程和我们平时使用vue开发web页面相差无几。而electron主进程的代码是放在background.js中  <br />![](https://cdn.nlark.com/yuque/0/2022/webp/2623835/1648610661846-1c84b489-63de-4f26-bcc7-0a1055c8ae54.webp#clientId=uea97c480-4750-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=u6a74baaf&margin=%5Bobject%20Object%5D&originHeight=349&originWidth=1121&originalType=url&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=u06bcf05e-a277-4834-a9bc-f98d790433c&title=)    项目主要有两个渲染进程，对应两个页面（main和remind），因此，这里我们采用多页面打包的方式。<br />vue-cli构建的包默认是单页面打包，所以，我们在vue.config.js中进行改造：