使用electron-builder开发桌面应用程序

首先安装vue脚手架 npm i @vue/cli -g ，然后使用vue create创建项目：vue create monitor 进入 monitor 目录，通过 npm install 构建项目。然后导入electron-builder：vue add electron-builder，最后使用 npm run  [commond] 测试或打包项目。步骤如下：

命令描述：

npm i @vue/cli -g           //安装@vue/cli工具

vue create [项目名称]       //创建vue项目并根据需要选择对应的组件

npm install                      //构建项目，将所有需要的组件导入项目

npm run electron:serve   //运行开发服务器，测试期间使用

npm run electron:build   //将项目打包为.exe后缀的可执行安装文件

 

效果图

1.执行 npm run electron:serve 效果图

2.执行 npm run electron:build 效果图，如果执行成功如图1，会在项目根目录创建dist_electrton文件夹，内容如图2

 

可能遇到的问题

1. TypeError: loaderContext.getOptions is not a function

解决：

(1) vue-cli 降到4.x版本 ，

(2)  ts-loader使用8.2.0版本

npm i -D ts-loader@~8.2.0