Electron+Vue 一路踩坑

春枫禾旭
6,547 阅读5分钟

Electron+Vue有哪些方案

看这篇博客，默认你已经基本了解Electron和Vue，至少知道是什么，干什么用的。最近有一个项目，需求方要一个单机版的信息管理系统（就是可以运行exe可执行文件来操作系统），可选的方案有QT，但是QT不太会，之前未曾接触，而且C++已经忘得差不多了，所以想到了Electron打包成exe可执行文件的方案。在网上查询发现，Electron+Vue有两种方案：

  • 一种是可以使用一个叫 electron-vue 的脚手架快速搭建项目，这种方式我尝试了，结构有些复杂，先放弃掉（❎）
  • 一种是先在Vue-cli脚手架下构建Vue项目，然后打包的静态资源在放到Electron框架里套个桌面程序的框，这种方式说实话有些山寨，因为没有发挥出Electron主进程/渲染进程的真实能力，但是谁让它简单呢，谁让自己菜呢？（✅）

正解 ： 比较菜的选手可以像我一样，先用第二种试一试，把坑踩一踩之后，再去看看第一种

Vue 项目打包中的坑点

Vue: 移步官网 Vue-cli快速构建项目

Electron : 移步官网Electron从github上clone一个现成的demo

# 在Vue项目根目录下，打包构建静态资源(去瞅瞅package.json文件的script字段)
> npm run build

打包后，默认生成./dist目录下有index.html文件和static文件夹，将这两项复制粘贴到Electron项目根目录下，这个操作覆盖掉了Electron根目录默认的index.html文件

# 之后，在命令行输入
> npm run start

electron .命令会启动Electron项目， 此时你会发现你的页面内一片空白————此为坑点一

>_< 坑点一 ： 界面空白

原因

此坑点发生的原因是Vue-cli构建的项目以默认的build配置打包时，静态资源路径会出问题

<!-- 以index.html中其中一个link的资源路径说明 -->
<!-- 下面是在默认配置下打包后路径-->
<link href=/static/css/app.885acb79920de6661f9ce02c72cdf789.css rel=stylesheet>

打包后的dist下目录是这样的

dist/
 |____index.html
 |____static/
        |______css/
        |______fonts/
        |______img/
        |______js/

能看出问题了吧，应该在/static前加一个.表示从当前目录开始

解决方案

修改config/index.js 里build字段里的assetsPublicPath为./

接着如果你在Vue项目里有图片、字体、图标等资源时，你会发现CSS样式和JS逻辑虽然正确展示出来了，但是图片/字体/图标都没加载出来————此为坑点二

>_< 坑点二 ： 图片/字体/图标资源无法加载

原因

首先要明白，打包后的图片/字体/图标等资源都是通过CSS来引入了，也就是说，index.html中只引入的CSS，图片/字体/图标等资源都是在CSS中通过url()来引入，我们去对应CSS下看看就知道问题了

/* 以其中一个字体文件为例 */
src:url(/static/fonts/ionicons.143146f.woff2)

由上面的打包结构目录可以知道，css/下的资源相对于fonts/下的路径应该是:

src:url(../../static/fonts/ionicons.143146f.woff2)

之所以路径出错，是因为

打包过程中，css是在js中引入的或是写在vue文件中的，css文件首先被less，postcss等处理，处理后会被ExtractTextPlugin处理，ExtractTextPlugin将js中的css全部抽离至app.css文件中，但ExtractTextPlugin抽离css文件时没有转换资源引入路径，导致app.css引入了相对app.css目录为"static/fonts/ **.woff2"的静态资源，该路径相对index.html即为：static/css/static/fonts/ **.woff2。

———— 来自详解vue静态资源打包中的坑与解决方案

解决方案

在build/util.js中找到ExtractTextPlugin对应的地方，加入publicPath : '../../'配置

Electron项目打包为.exe时的坑点

将Electron打包为.exe可执行文件有两种方案

  • electron-packager （❎）
  • electron-builder （✅）

>_< 坑点三 ： electron-packager 出现 operation not permitted 错误

尝试用electron-packager打包，但是一直出现如下问题：

EPERM: operation not permitted, lstat
'C:\Users\24616\AppData\Local\Temp\electron-download-4IA1EE\electron-v6.1.7-win32-x64.zip'

查了网上说是权限问题，我特地打开了Temp文件夹的属性看了看发现权限是没问题的，再去electron-download-4IA1EE文件夹下去看，发现是空文件夹，说明electron-v6.1.7-win32-x64.zip这个包下载不下来，我又离线下载了这个包然后放到Temp里也不行，所以这个问题目前解决不了，放弃electron-packager

还好electron-builder最终打包成功了，但是一路坑点也是很多

>_<坑点四 ：electron-builder打包出现 ⨯ Get 错误 or download failed 错误

Npm全局安装好electron-bulider后，运行electron-builder .，发现报错

  ⨯ Get https://github-production-release-asset-2e65be.s3.amazonaws.com/65527128/8793ac80-
  adec-11e9-9791-872b1ff67872?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAIWNJYA
  X4CSVEH53A%2F20200110%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20200110T021822Z&X-Amz-
  Expires=300&X-Amz-Signature=0dbecd5da3b837abab4aa9f0f842dd1eb71118fdb4d251c111fff1ec76d4
  de36&X-Amz-SignedHeaders=host&actor_id=0&response-content-disposition=attachment%3B%20fi
  lename%3DwinCodeSign-2.5.0.7z&response-content-type=application%2Foctet-stream: dial tcp:
  lookup github-production-release-asset-2e65be.s3.amazonaws.com: getaddrinfow: The
  requested name is valid, but no data of the requested type was found.

这段意思是要下载什么东西但是没下载成功，上网一查发现需要两个东西，国内的话下载不下来，需要离线下载完后放到C:\Users\24616\AppData\Local\electron-bulider\Cache目录下，这样builder就不会去下载而是直接用Cache中的，需要下载的离线包有

  • nsis
  • winCodeSign

这里面还有版本的问题，版本不对应electron-builder还是会去下载相应的文件，进而报错。这里我列出我的Cache目录 ：

Cache
 |____nsis
 |       |___ nsis-3.0.3.2
 |       |___ nsis-resources-3.4.1
 |
 |____winCodeSign  
            |___winCodeSign-2.5.0

好人做到底，我把Cache打包成zip了，提供给一个资源(我用的是electron V6.1.7)

https://pan.baidu.com/s/15-wH4lMutcAKCO_VSX_fPw
# 把包下载下来，解压到Cache目录就好了

解决了以上坑点，就可以开开心心的点击运行.exe，仿佛从此拿下了桌面程序（感谢开发Electron神器的大牛，赋予了我有一种自己也是大牛的错觉🙃）

avatar
文章
阅读
粉丝