0.背景

最近做一个基于 VUE 2 的资产后台管理系统。因为暂时没有后台人员编写数据接口，只把前端页面构建出来了。
突然有一天，领导说有客户来访，需要看一看后台管理系统的界面演示。而当前做的web项目只有纯静态，也木有上线，所以给客户演示时非常不方便，于是领导喊我将其打包成一个桌面应用程序，直接可以离线观看的那种。
当时听着也是一愣，这玩意不是应该是c++或java这种更牛逼的东西干的事情吗？
好吧，领导说整，那就整看看呗。

1.VUE 2.x 介绍

vue就先不多说了，此段纯属凑字数。

2.electron 介绍

简单百度一下，前端开发桌面程序，弹出了2个东西，NW.js 和 Electron。
哇，真是牛逼，但是都不会。要开始选择用哪个啦。
对比了一下两个工具的github星星，那就选择Electron吧。
electron是基于Chromium 和 Node.js 来构建一个跨平台应用的。Chromium是一个开源浏览器，与Chrome区别是不会自动更新，但是一些新特性会在Chromium先上。既然自带浏览器内核，这么的跨平台，终于不用考虑兼容性啦，对于一个前端er来说，真的是太开心了呀！

3.electron 安装

a.

先上它的github。

npm安装

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

此时你就可以看到官方demo了吧。

b.

再看看项目中的入口文件main.js
以下是createWindow函数中的部分：

 // 此处设置窗口大小
  mainWindow = new BrowserWindow({width: 1200, height: 1000})

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

c.

接下来打包VUE，将打包后的文件放到这边来。
回到vue项目中。
打包前记得将config中的index.js进行修改，以免打包出来的js和css文件路径不对。将打包文件的绝对路径改为相对路径。

再来改图片路径，这个问题把我坑惨了。
由于：ExtractTextPlugin抽离css文件时没有转换资源引入路径，导致app.css引入了相对app.css目录为”static/img/ .png”的静态资源，该路径相对index.html即为：static/css/static/img/ .png。
导致：图片引入路径多了”/static/css”两层目录。
解决：将build文件夹下的utils.js中的ExtractTextPlugin的publicPath修改一下，如下：

至此，再运行

npm run build

得到dist文件夹，将里面的东西考到刚刚的electron项目中。
再次

npm start

不出意外的话，即得到了项目窗口啦。

4.VUE 项目中安装electron

然后开始在vue项目中进行打包

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",// 这一句是增加的
    },

再：

npm run electron_dev

就会得到跟开始一样的效果：

5.将项目打包成exe文件

到最后一步了，将项目打包成exe文件
首先，为之前下载好的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"
    },

关于这条命令，介绍如下

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

1. sourcedir 资源路径，在本例中既是./dist/
2. appname 打包出的exe名称
3. platform 平台名称（windows是win32）
4. 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 ."
  },
}

然后开始打包

npm run electron_build

会得到一个文件夹，这个就是你的打包文件。双击其中的*.exe文件，就可以打开你的桌面应用啦。

6.友情链接

张鑫旭的electron