使用electron 将web页面(vue-cli)打包为桌面应

转载参考：
https://www.jianshu.com/p/eaacfc40504d

从官网上clone一个例子

官网：https://electronjs.org/docs
git clone https://github.com/electron/electron-quick-start

cd electron-quick-start

npm install

npm start

项目跑起来之后，就会出现electron的桌面页面，大概看一下入口文件main.js 和package.json

 mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),   //index.html即是入口html文件。
    protocol: 'file:',
    slashes: true
  }))

//package.json
{
  "name": "electron-quick-start",
  "version": "1.0.0",
  "description": "A minimal Electron application",
  "main": "main.js",   //设置入口文件main.js
  "scripts": {
    "start": "electron ."
  }
  ...
  }

使用 vue-cli 新建一个项目，并安装相关依赖

npm install electron --save-dev

npm install electron-packager --save-dev

其中electron-packager是打成exe文件的插件

将步骤一中的main.js拷贝到新建项目的build目录下，并更名为electron.js
按照实际项目路径更改electron.js中的路径

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

更改config/index.js中生产模式下（build）的assetsPublicPth, 原本为 /, 改为 ./

在新建项目package.json文件中增加一条指令

// test-electron/package.json
"scripts": {
   ...
    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
    "build": "node build/build.js",
    "electron_dev": "npm run build && electron build/electron.js"   //增加这条,JSON文件不支持注释，引用时请清除
  },

执行npm run build 生成dist目录
执行npm run electron_dev 启动electron
即可看到生成的应用程序

打包exe文件

复制build目录下的electron.js到dist目录中，并注意修改路径
.复制官网上clone的例子中的package.json到dist目录中,注意修改路径(官网上的)

在项目的package.json中（注意不是dist下的package.json）为之前下载好的electron-packager，增加一条启动命令

"scripts": {
   ...
    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
    "build": "node build/build.js",
    "electron_dev": "npm run build && electron build/electron.js",
    "electron_build": "electron-packager ./dist helloworld --platform=win32 --arch=x64 --icon=./src/assets/home.ico --overwrite"   //增加这条
  },

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

sourcedir: 资源(dist/package.json)路径，在本例中既是./dist/
appname:打包出的exe名称,这里取名为helloworld
platform :平台名称（windows是win32）
arch: 版本，本例为x64
后边的配置项都是选填，默认是没有这些的，这里只选填了exe的图标。
（注意：不可通过重命名的方式将一个png或jpg格式的文件改为ico格式，会导致无法build成功）

生成exe
执行npm run electron_build，可以看到项目目录中多了一个helloworld-win32-x64文件，找到里面的helloworld.exe运行即可。