electron+vue实现桌面应用

electron+vue实现桌面应用

1、安装vue-cli，先实现一个vue项目

//1、安装vue脚手架
npm install -g @vue/cli
//2、创建项目
vue create 项目名

注意：自定义配置的时候，没有安装vue-router,单独安装 vue-router （npm install vue-router --save）时候vue-router报错："export ‘createWebHistory’ was not found in ‘vue-router’
解决方案安装最新版的vue-router：npm install vue-router@next --save
原因：vue-cli3和vue-cli4中router的写法不同，不兼容，需要更新到最新的router匹配vue-cli4。

2、配置electron

//通过以下命令安装vue-cli-plugin-electron-builder的生成器
vue add electron-builder

配置完后生成的目录：

3、运行

npm run electron:serve

4、打包

npm run electron:build

（1）打包报错：
原因：electron-v13.5.1-win32-x64.zip包下载太慢，可以下载好放到本地这个文件夹下：C:\Users\user\AppData\Local\electron\Cache

报错2：Error in script “” on line 1 – aborting creation process
原因：文件路径中包含中文。
解决方案：更换路径，或者中文改英文

（2）打包完成，生成.exe文件，双击安装。