0.背景

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

1.VUE 2.x 介绍

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

2.electron 介绍

简单百度一下,前端开发桌面程序,弹出了2个东西,NW.jsElectron
哇,真是牛逼,但是都不会。要开始选择用哪个啦。
对比了一下两个工具的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

Logo

快速构建 Web 应用程序

更多推荐