使用vue-cli-plugin-electron-builde

2019-07-03 本文已影响18人相听不厌

今早看到有大佬评论，所以就研究了一下vue-cli3.0+electron的桌面应用开发

image.png
首先感谢@素笺淡墨染流年！

首先，去看了一下vue-cli-plugin-electron-builder的介绍，网址

image.png

大概意思就是：
1、这个vue-cli3.0的插件针对Electron，不用其他配置，用electron-builder进行构建就ok了
2、你的应用以后必须要用vue-cli3.0来创建了，2.0要淘汰了

PS：150分的英语只能考75分的水平，也只能翻译到这个地步了

快速开始

第一步：用vue-cli3.0创建一个项目

打开命令行工具

vue create demo

选择默认

image.png

安装完成

image.png

第二步：安装vue-cli-plugin-electron-builder

进入项目

cd demo

进入vue项目管理器：

vue ui
导入demo

image.png

点击插件，并添加插件

image.png

搜索vue-cli-plugin-electron-builder,勾选，安装

image.png

安装完成后，点击“安装完成”，（必须要点击安装完成，否则项目架构会出问题）

点击安装完成后，需要等一段时间，会重新构建项目架构

第三步：用编辑器打开创建好的项目

image.png

第四步：看一下package.json

image.png

运行命令和构建命令，我们试一下

先运行让项目跑起来：

npm run electron:serve

image.png
注意：命令行显示 Launching Electron...需要等待一段时间，心急吃不到热豆腐

出现一个问题：

Vue Devtools failed to install :Error:net::ERR_CONNECTION_TIMED_OUT
这个问题很可能是由于没有安装vue devtools
欢迎关注我后续文章，我会在后续文章里面研究关于Electron安装vue devtools

修改App.vue中msg的内容修改为Hello World：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Hello World"/>
  </div>
</template>

保存一下，发现前端正常渲染

image.png

运行没有问题，我们再试一下构建命令

先CTRL + C停止项目
然后运行
npm run electron:build
需要一段时间，贴出来命令行的样子

D:\Electron\demo>npm run electron:build

> demo@0.1.0 electron:build D:\Electron\demo
> vue-cli-service electron:build

 INFO  Bundling render process:

|  Building modern bundle for production...

 DONE  Compiled successfully in 12007ms                               7:06:54 PM


  File                                      Size             Gzipped

  dist_electron\bundled\js\chunk-vendors    65.14 KiB        23.43 KiB
  .2026470a.js
  dist_electron\bundled\js\app.10f792b9.    4.55 KiB         1.63 KiB
  js
  dist_electron\bundled\css\app.e2713bb0    0.33 KiB         0.23 KiB
  .css

  Images and other types of assets omitted.

 DONE  Build complete. The dist_electron\bundled directory is ready to be deploy
ed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployme
nt.html

-  Bundling main process...

 DONE  Compiled successfully in 8595ms                                7:07:03 PM


  File                                   Size              Gzipped

  dist_electron\bundled\background.js    160.44 KiB        49.67 KiB

  Images and other types of assets omitted.

 INFO  Building app with electron-builder:
  • electron-builder version=20.44.4
  • description is missed in the package.json appPackageFile=D:\Electron\demo\di
st_electron\bundled\package.json
  • author is missed in the package.json appPackageFile=D:\Electron\demo\dist_el
ectron\bundled\package.json
  • writing effective config file=dist_electron\builder-effective-config.yaml
  • no native production dependencies
  • packaging       platform=win32 arch=x64 electron=5.0.0 appOutDir=dist_electr
on\win-unpacked
  • default Electron icon is used reason=application icon is not set
  • building        target=nsis file=dist_electron\demo Setup 0.1.0.exe archs=x6
4 oneClick=true perMachine=false
�[34m  • �[0mdownloading     �[34mparts�[0m=1 �[34msize�[0m=1.4 MB �[34murl�[0m=
https://github.com/electron-userland/electron-builder-binaries/releases/download
/nsis-3.0.3.2/nsis-3.0.3.2.7z
�[34m  • �[0mdownloaded      �[34mduration�[0m=1m0.625s �[34murl�[0m=https://git
hub.com/electron-userland/electron-builder-binaries/releases/download/nsis-3.0.3
.2/nsis-3.0.3.2.7z
�[34m  • �[0mdownloading     �[34mparts�[0m=1 �[34msize�[0m=1.0 MB �[34murl�[0m=
https://github.com/electron-userland/electron-builder-binaries/releases/download
/nsis-resources-3.3.0/nsis-resources-3.3.0.7z
�[34m  • �[0mdownloaded      �[34mduration�[0m=1m28.414s �[34murl�[0m=https://gi
thub.com/electron-userland/electron-builder-binaries/releases/download/nsis-reso
urces-3.3.0/nsis-resources-3.3.0.7z
  • building block map blockMapFile=dist_electron\demo Setup 0.1.0.exe.blockmap
 DONE  Build complete!

重点是最后一行：
build complete!构建完成！