关于Vue项目使用electron插件

一、原因

        公司突然来了个需求，想要直接查询和传输本地的文件传输给服务端，个人觉得MDN上的fileSystem API 并不符合需求，本人才疏学浅，据我所知，浏览器环境是不允许直接访问运行设备上的（不是传统的文件上传下载，与用户没有显式的选择文件的交互），这对于个人设备的隐私和安全是有害的。最近在看Node,知道fs'模块可以操作文件，所以寻妖一个将浏览器运行环境和Node运行环境整合在一起的。所以采用electron，并且采用vue插件版本的方式来实现。

二、安装

        实现功能之前，在网上查找了一番，可以使用electron-builder来实现。安装之前，最好把npm的镜像源更改一下。本人用的是最新的淘宝镜像源。

npm config get registry  //查看镜像源
npm config set registry https://registry.npmmirror.com/ //修改镜像源

安装electron-builder，花了好长时间。发现修改源之后，在项目中的终端中运行

npm install electron -g  //安装electron环境
vue add electron-builder   //安装打包工具

安装了几次发现都不成功，停在了从github down包哪里，开了vpn 也不行，直接访问地址又可以直接下载。 后来发现要在更换了镜像源的情况下再，给其中的依赖单独设置源。在终端中输入

npm config edit //编辑npm的配置文件 运行之后会弹出一个配置文件
// 再将下面行粘贴进去就可以了
electron_builder_binaries_mirror=https://registry.npmmirror.com/-/binary/electron-builder-binaries/

electron_mirror=https://registry.npmmirror.com/-/binary/electron/

安装成功后，你的package.json项目的启动项会多出来几个选择

直接运行

npm run electron:serve 

这样你的浏览器页面，就出现在一个客户端里了，electron又许多配置项，可以关于打包的需要自行了解了，我还没搞太清楚。希望可以帮助到你，如有错误，感谢指正