electron+vue-cli4搭建桌面程序(开发环境+打包环境)

Electron 是 GitHub 发布的跨平台桌面应用开发工具，支持 Web 技术开发桌面应用

一、首先安装 node + npm 环境

二、安装 nrm 并添加淘宝源(该步可省略,添加淘宝源快一些)
1.用 npm 全局安装 nrm

Mac 上全局安装要加 sudo

npm install -g nrm

2.查看所有的可用的源

nrm ls

3.添加源(如没有淘宝源则按如下命令添加)

nrm add 源的名称 https:// 地址

 nrm add taobao  https://registry.npm.taobao.org

4.如果想删除某个源可按如下命令删除

nrm del 源的名字

 nrm del  taobao  

5.切换到某个源

nrm use 源的名字

nrm use taobao  

6.测试源的速度

nrm test

三、安装vue-cli

1.查看是否已安装过 vue-cli

vue -V

2.如果vue-cli存在,需要卸载可以执行如下命令

npm uninstall vue-cli -g 

3安装vue-cli

npm install @vue/cli -g

四、创建项目

vue create 项目名

vue create  my-project

执行上面命令后,如下所示会让你选择对应配置,选择后回车继续

五、添加 electron-builder

命令行进入项目根目录,执行如下命令

vue add electron-builder

然后如下图输入y ，然后回车继续

等待片刻然后到这步，如下图选择对应版本，然后回车继续

六、运行

命令行进入项目根目录，执行如下

npm run electron:serve

七、构建

命令行进入项目根目录，执行如下

npm run electron:build

到此简单的桌面应用程序就搭建好了

安装过程中如果遇到electron下载太慢,如下图所示

解决办法:
方法一： 在electron中指定下载源
1.找到项目中 node_modules/electron/install.js 文件

2.在原来的代码块downloadArtifact里添加代码

（注意 process.arch 后需添加一个逗号）

// downloads if not cached
downloadArtifact({
     
  version,
  artifactName: 'electron',
  force: process.env.force_no_cache === 'true',
  cacheRoot: process.env.electron_config_cache,
  platform: process.env.npm_config_platform || process.platform,
  arch: process.env.npm_config_arch || process.arch,
  //============ 新添加的代码开始 ==============
  mirrorOptions:{
     
    mirror: 'https://npm.taobao.org/mirrors/electron/',
    customDir: version
  }
  //============ 新添加的代码结束 ==============
}).then(extractFile).catch(err => {
     
  console.error(err.stack)
  process.exit(1)
})

截图如下:

3.然后在 node_modules/electron/ 目录下执行如下命令

node install.js

方式二：手动下载

1.下载对应的版本

下载地址: https://github.com/electron/electron/tags

我这里的版本是 v9.2.1 那么对应的版本下载地址如下

v9.2.1 是对应的版本

https://github.com/electron/electron/releases/tag/v9.2.1

下载electron-v9.2.1-win32-x64.zip 和 SHASUMS256.txt 文件

2.将下载的文件拷贝到对应的目录即可

如下 ~ 表示为当前用户目录

Linux系统对应的目录

$XDG_CACHE_HOME 或 ~/.cache/electron/

MacOS系统对应的目录

 ~/Library/Caches/electron/

Windows系统对应的目录

$LOCALAPPDATA/electron/Cache 或 ~/AppData/Local/electron/Cache/

3.然后执行如下命令

npm install --save-dev electron