使用electron12 + vue3 + cli4 开发跨平台桌面应用

最近遇到很多人在找vue3和electron10以上版本开发桌面应用，寻找很久，发现SimulatedGREG/electron-vue 版本太旧，升级很麻烦，升级electron版本都特别困难，而且出现很多的问题，更别说升级Vue3。根据查找很多资料，这里给大家一个教程，具体怎么一步一步手动创建electron10+ 、Vue3+、cli4+的项目。

相关库：

electron ：https://www.electronjs.org/

Vue3： https://cn.vuejs.org/

Vue-cli :https://cli.vuejs.org/zh/

注意事项：使用cnpm 加速

npm config set registry https://registry.npm.taobao.o

npm config set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/

一、创建项目

1、安装Vue-cli

npm install @vue/cli -g

2、创建Vue项目（这里是ts项目，如果是js 项目流程是一样的）

vue create electron-vue-demo

注意：这里如果选择了router，这里会询问是否使用history模式。

vue-router 默认使用hash模式（即通过url#hash来跳转页面），使用URL的hash来模拟一个完整的 URL，当URL改变时，页面不会重新加载。 如果使用history，URL就像正常的url，例如 http://yoursite.com/user/id ，比较好看。但是还需要后台配置支持。

3、自动安装electron（这一步骤很重要，electron-builder 会自动配置package.json 文件，打包方式和启动方式。如果想了解electron-builder，请点这里https://www.electron.build/）

vue add electron-builder

* 注意 这里版本选择根据自己需求。

4、安装依赖

npm install

5、启动app

npm run electron:serve

注意：启动会出现等待很久现象

INFO  Launching Electron...
Failed to fetch extension, trying 4 more times
Failed to fetch extension, trying 3 more times
Failed to fetch extension, trying 2 more times
...

这个是因为无法下载对应的组件，可能需要VPN，一般我们去掉组件加载就好了。

编译成功后，就会出现开发环境的APP了。

6、打包app

npm run electron:build