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

electron官网
electron GitHub

步骤一. 从官网上clone一个例子

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
npm start
项目跑起来之后,就会出现electron的桌面页面,大概看一下入口文件main.jspackage.json

//main.js
 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 新建一个项目,并安装相关依赖

vue init webpack test-electron
cd test-electron
npm install
npm install electron --save-dev
npm install electron-packager --save-dev
其中electron-packager是打成exe文件的插件。

将步骤一中的main.js拷贝到新建项目的build目录下,并更名为electron.js

使用electron 将web页面(vue-cli)打包为桌面应用_第1张图片
拷贝main.js.png

按照实际项目路径更改 electron.js中的路径

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

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

 build: {
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',         //改这里
    ....
}
使用electron 将web页面(vue-cli)打包为桌面应用_第2张图片
更改assetsPublicPath.png

步骤三:在新建项目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
即可看到生成的应用程序

使用electron 将web页面(vue-cli)打包为桌面应用_第3张图片
应用程序.png

步骤四:打包exe文件

(1).复制build目录下的electron.jsdist目录中,并注意修改路径

//electron.js
mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),   //dist下的electron.js和index.html是同级
    protocol: 'file:',
    slashes: true
  }))

(2).复制官网上clone的例子中的package.jsondist目录中,注意修改路径

//package.json
{
  "name": "electron-quick-start",
  "version": "1.0.0",
  "description": "A minimal Electron application",
  "main": "electron.js",    //
  "scripts": {
    "start": "electron ."
  },
  "repository": "https://github.com/electron/electron-quick-start",
  "keywords": [
    "Electron",
    "quick",
    "start",
    "tutorial",
    "demo"
  ],
  "author": "GitHub",
  "license": "CC0-1.0",
  "devDependencies": {
    "electron": "~1.7.10"     //官网上clone下来的版本是1.7.8,这里因为我安装的electron是1.7.10,所以改成了1.7.10
  }
}
使用electron 将web页面(vue-cli)打包为桌面应用_第4张图片
dist目录.png

(3)在项目的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 –platform= –arch= [optional flags…]

  • sourcedir: 资源(dist/package.json)路径,在本例中既是./dist/
  • appname:打包出的exe名称,这里取名为helloworld
  • platform :平台名称(windows是win32)
  • arch: 版本,本例为x64

后边的配置项都是选填,默认是没有这些的,这里只选填了exe的图标。
(注意:不可通过重命名的方式将一个png或jpg格式的文件改为ico格式,会导致无法build成功)

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

使用electron 将web页面(vue-cli)打包为桌面应用_第5张图片
生成exe.png

使用electron 将web页面(vue-cli)打包为桌面应用_第6张图片
生成exe.png

可以看到弹出的应用程序上已经有了通过 --icon=./src/assets/home.ico设置的图标,但不知为何, .exe文件的图标并没有变。

(5)修改.exe图标
下载安装Resource Hacker,在.exe文件上鼠标右键,更换图标后保存即可。

使用electron 将web页面(vue-cli)打包为桌面应用_第7张图片
鼠标右键.png

使用electron 将web页面(vue-cli)打包为桌面应用_第8张图片
changeIcon.png

你可能感兴趣的:(使用electron 将web页面(vue-cli)打包为桌面应用)