使用electron打包vue2项目，使其成为可执行文件

最近会需要把vue2写的spa项目打包成windows平台可执行的exe文件。这样就可以把之前用html+css+js开发的网页应用封装成类似客户端的应用，提升用户体验。Electron是基于Chromium 和 Node.js 来构建一个跨平台应用的，在全球最大同性交友平台上有58000多颗星星。

第一步

修改config文件夹中的index.js，把打包的绝对路径修改为相对路径，这是为了避免白屏。

第二步

先上github，把electron-quick-start这个项目克隆下来，之后需要用到。

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
cnpm install 
npm start

第三步

在需要打包的vue项目中安装electron和electron-packager

1 2	cnpm install electron --save-dev //安装electron cnpm install electron-packager --save-dev //这个是打成exe文件的插件，之后要用，提前下载好

把第二步克隆的electron-quick-start项目中的main.js搬到vue的build文件中，并改个名字electron.js。
此时入口文件应该是打包后的dist文件夹中的index.html，所以这里需要更改入口页面的路径。

// 此处设置入口页面
mainWindow.loadURL(url.format({
  pathname: path.join(__dirname, '../dist/index.html'),// 更改了这
  protocol: 'file:',
  slashes: true
}))

再在package.json文件中增加一条指令，用来启动electron，即：

"scripts": {
       "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
       "start": "npm run dev",
       "build": "node build/build.js",
       "electron_dev": "npm run build && electron build/electron.js",// 这一句是增加的
   },

现在可以开启dev调试了

1	npm run electron_dev

第四步

这是最后一步，将项目打包成可执行的exe文件。首先，打开package.json，为之前下载好的electron-packager，增加一条启动命令：

"scripts": {
      "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
      "start": "npm run dev",
      "build": "node build/build.js",
      "electron_dev": "npm run build && electron build/electron.js",
      // 就是下面这一句
      "electron_build": "electron-packager ./dist/ --platform=win32 --arch=x64 --icon=./src/assets/favicon.ico --overwrite"
  },

关于这条命令，介绍如下:

1	electron-packager <sourcedir> <appname> –platform=<platform> –arch=<arch> [optional flags…]

sourcedir 资源路径，在本例中既是./dist/
appname 打包出的exe名称
platform 平台名称（windows是win32）
arch 版本，本例为x64

后边的配置项都是选填，可以设置二进制打包等，默认是没有这些的，这里只选填了exe的图标。

然后，在打包后的dist文件夹下增加electron.js和package.json。
这个electron.js与刚刚build文件夹下的electron.js一样，不过入口页面路径应该改为相对于当前文件的路径。即：

mainWindow.loadURL(url.format({
  pathname: path.join(__dirname, 'index.html'), //注意此处
  protocol: 'file:',
  slashes: true
}))

这个package.json与最开始electron-quick-start项目中的package.json文件一致，不过里面的main应该指向从build文件夹中的electron.js。即：

{
  "name": "RFID",
  "version": "1.0.0",
  "description": "A minimal Electron application",
  "main": "electron.js",// 注意此处
  "scripts": {
    "start": "electron ."
  },
}

然后开始打包

1	npm run electron_build

build完毕后，在项目根目录下会找到一个文件夹，双击其中的exe文件，就可以打开你的桌面应用啦。

转载参考

VUE 2.x + electron 打包桌面应用exe