使用electron打包vue项目成为应用程序流程及常见问题解答

为什么选择electron？

版本兼容性

当项目主体针对的医院、政府等单位，一般还在使用相对老旧版本的系统与浏览器，无法对vue框架、ES6等新特性进行支持时，使用electron将web程序打包成exe应用程序即可解决大部分的版本兼容性问题。除非摒弃现有技术栈转而回去写原生的代码，否则你大部分掌握的新语法、新特性与新技术都将得不到应用。

混合化开发

类似使用RN或flutter，采用跨平台开发而非原生开发，大多数情况下都是为了节省人工成本从而降低了产品的性能质量。跨平台技术的发展以及资本积累的大势所趋，自然原生开发对于产品是最好不过，可对于大多数小公司而言，大多还是会无奈牺牲些许产品性能而降低大部分开发成本。

VSCODE就是electron做的

无他，如题。

搭建流程

一.本地安装electron及初始化

1.从https://github.com/electron/electron-quick-start中clone一份或下载ZIP文件到本地；

2.项目目录下打开cmd或powershell，输入npm install安装相关模块及依赖；

3.安装完毕后输入npm start即可预览下载的demo中electron桌面程序；

二、项目打包及配置

1.首先将刚才下载的electron-quick-start里的main.js拷贝到你需要打包的项目的build目录下，并改名为electron.js。

2.使用终端进入项目目录，安装相关依赖：

npm install -g cnpm --registry=https://registry.npm.taobao.org //淘宝镜像
cnpm install electron --save-dev
cnpm install electron-packager --save-dev

3.用IDE打开项目，进入electron.js，修改如下：

mainWindow.loadFile('./dist/index.html')
//或
mainWindow.loadURL('https://www.baidu.com/index.html')
// 注意mainWindow对象在载入webview时有两种方法
// loadFile方法为导入本地html loadURL方法为载入线上项目地址

4.进入项目的config目录，打开index.js，修改如下：

// Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',

5.打开项目的package.json文件，修改如下：

"main":"build/electron.js",
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "test":"electron .",
    "electron_build":"electron-packager ./dist exeName --platform=win32 --arch=x64 --icon=./assets/img/favicon.ico --overwrite"
  },

6.执行npm run build 打包项目

在打包后的dist目录内拷贝一份electron.js文件，若在第三步使用的不是在线地址，则需要进入该electron.js文件，修改如下：

mainWindow.loadFile('index.html')

之后将package.json文件拷贝一份到dist目录下，修改如下：

"main":"electron.js"

7.打开终端进入项目目录，执行如下：

 cnpm install electron-packager-interactive --g   //安装打包插件`

electron-packager-interactive -g  //进行可视化打包

三、常见问题

Q.下载或安装依赖时卡住无法成功安装？

A：优先切换淘宝镜像再下载安装

Q.执行electron-packager-interactive -g 后打包过程非常缓慢？

A.因为打包时需要从外网下载额外的插件，所以网速感人。解决办法是提前下载好额外的插件包，网址如下：

https://npm.taobao.org/mirrors/electron/

从该网页内根据你的electron版本下载对应需要打包的系统的压缩文件，下载完成后进行如下操作：

ctrl+E-进入C盘-用户-选择当前使用的用户-进入AppData文件夹-Local文件夹-electron文件夹-Cache文件夹

将下载的压缩包直接放到该文件夹下即可。

Q.打包时报错“Error: EPERM: operation not permitted”

A.这是由于当前运行的终端未拥有管理员权限，cmd搜索powerShell并以管理员身份运行即可