electron入坑指南

简介

electron 实际集成chrome浏览器和node环境, 运行你写的网页

  • app 基本目录结构

    • index.html 名称可以不是index, 这个文件与普通网页的区别是它之中要引用<script 'renderer.js'> 类似这样
    • main.js 必须为这个名称, 用于创建窗口和主线程的操作, 能访问node模块
    • renderer.js 渲染进程, 能访问被打包的node模块和浏览器

electron-vue

一开始什么都不会, 所以用这个脚手架快速弄一个项目模板肯定是最好的.

electron-vue模板项目弄好后, npm run dev 一切正常.

但当你兴高采烈的编译打包项目时, 就发现GG了. 由于墙, 无法下载...

随后就发生了一连串问题, 以下是我对每个问题找到的解决方案

electron-builder 由于网络原因无法下载

Error: connect ETIMEDOUT 52.216.65.240:443

添加以下淘宝镜像到环境变量

ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/

下载二进制包到 二进制包缓存目录

  • macOS ~/Library/Caches/electron-builder
  • linux ~/.cache/electron-builder
  • windows %LOCALAPPDATA%\electron-builder\cache

我电脑上 二进制包缓存目录 有以下文件

  • windows 下

    • nsis

    • nsis-resources
    • winCodeSign
  • linux 下

    • appimage

    • fpm
      • fpm-1.9.2-2.3.1-linux-x86_64 下载

electron-vue 编译后运行空白

能够编译后不代表能够运行, 运行后发现一片空白, 通过暴力在renderer.js里每一行输出alert('xx')来判断哪里报错,

发现运行 require('vue') 加载vue时报错了, 但vue不是应该被webpack打包吗

于是在 webpack.renderer.config.js 配置里找到了 externals 配置, 发现vue特殊被白名单除外了, 既然被打包了怎么还找不到..

let whiteListedModules = ['vue', 'iview']
// externals 里的都将不被webpack打包
externals: [
...Object.keys(dependencies || {}).filter(d => !whiteListedModules.includes(d))
],

不管这个了, 我把所有 externals 配置都注释掉, 都打包进来. 然后发现 HtmlWebpackPluginnodeModules 字段在运行时是 false

于是改成

// 原来
nodeModules: process.env.NODE_ENV !== 'production' ? path.resolve(__dirname, '../node_modules') : false
// 改成, 一直提供node模块的目录
nodeModules: path.resolve(__dirname, '../node_modules')

这样暴力之后, 报了另一个错误, 说什么依赖模块 vue 未找到

后台想了半天办法, 还是妥协了

设置环境变量 ELECTRON_BUILDER_ALLOW_UNRESOLVED_DEPENDENCIES=1 忽略这个报错

(后来发现正确配置时根本不会爆什么错或这警告的)

这样打包出来可以运行了. 虽然有一点大. 我也是后面才体会到为什么 electron-vue 要这么配置

electron-builder 打包配置

我经过摸索, 发现双 package.json 的形式有许多优势, 这是我现在采用的方式

开发根目录的 package.json 打包配置片段

  "scripts": {
// ... 省略一些
"build:win": "electron-builder -- win",
"build:deb": "electron-builder --linux deb",
"postinstall": "electron-builder install-app-deps"
},
"build": {
"appId": "com.xueyou.testapp",
// 这里的产品名称将影响打包出来安装包的名称
"productName": "testapp",
"copyright": "Copyright © 2017 ${author}",
"directories": {
// 定义输出目录
"output": "release",
// 定义app根目录, 我的在 dist 目录里
"app": "./dist"
},
// 将 globa 文件匹配到的文件打包, 这里就是 将 app根目录下的所有文件打包
"files": [
"./**/*"
],
"win": {
"target": "nsis",
"icon": "dist/icons/icon.ico"
},
"linux": {
"icon": "dist/icons",
"category": "Utility"
}
},

app根目录的 package.json 打包配置片段,

注意下面的dependencies, 这很重要, 我们想在renderer.js 渲染进程访问node模块, 就必须将node模块打包,

以下的项目依赖就是你的应用能访问的node外部模块, 它会在 electron-builder install-app-deps 运行时, 在app根目录创建node_modules依赖

webpack打包renderer.js时, 要 output 配置 libraryTarget: 'commonjs2', 让输出的模块能访问node

{
// app 名称, 注意不是安装包的名称
"name": "checkout-counter",
// app 版本
"version": "1.0.1",
// app 说明
"description": "央联收银台",
"author": "XueYou <xueyoucd@gmail.com>",
"license": "MIT",
// 入口文件
"main": "./main.js",
// 项目依赖
"dependencies": {
"axios": "^0.17.1",
"echarts": "^3.8.5",
"querystring": "^0.2.0",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
}
}

linux 打包失败

Need executable 'ar' to convert dir to deb

fpm 工具需要 ar 命令才能打包deb, 后来google后发现这个命令包含在binutils

sudo apt install binutils 解决依赖顺利打包

打包出来的deb安装时失败, 会报 libconf-2.so 找不到

suduo apt install -f 安装依赖后, 在安装deb包就行了

然后就能在运行了

尾巴

以后我再研究怎么自动更新, 如果有疑问可以联系我

ubuntu 下的运行图

参考文章

electron入坑指南的更多相关文章

  1. C语言入坑指南-被遗忘的初始化

    前言 什么是初始化?为什么要初始化?静态变量和局部变量的初始化又有什么区别?实际应用中应该怎么做?本文将一一回答这些问题. 什么是初始化 初始化指的是对数据对象或者变量赋予初始值.例如: int va ...

  2. Elasticsearch入坑指南之RESTful API

    Elasticsearch入坑指南之RESTful API Tags:Elasticsearch ES为开发者提供了非常丰富的基于Http协议的Rest API,通过简单的Rest请求,就可以实现非常 ...

  3. ElasticSearch入坑指南之概述及安装

    ---恢复内容开始--- ElasticSearch入坑指南之概述及安装 了解ElasticSearch ElasticSearch(简称ES)基于Lucene的分布式全文检索引擎.使用ES可以实现近 ...

  4. eclipse中导入外部包却无法查看对应源码或Javadoc的入坑指南

    eclipse中导入外部包却无法查看对应源码或Javadoc的 入坑指南 出现这个错误的原因是,你虽然导入了.jar包,但没有配置对应的Javadoc或源码路径,所以在编辑器中无法查看源 码和对应AP ...

  5. Rust入坑指南:核心概念

    如果说前面的坑我们一直在用小铲子挖的话,那么今天的坑就是用挖掘机挖的. 今天要介绍的是Rust的一个核心概念:Ownership.全文将分为什么是Ownership以及Ownership的传递类型两部 ...

  6. Rust入坑指南:鳞次栉比

    很久没有挖Rust的坑啦,今天来挖一些排列整齐的坑.没错,就是要介绍一些集合类型的数据类型."鳞次栉比"这个标题是不是显得很有文化? 在Rust入坑指南:常规套路一文中我们已经介绍 ...

  7. Rust入坑指南:亡羊补牢

    如果你已经开始学习Rust,相信你已经体会过Rust编译器的强大.它可以帮助你避免程序中的大部分错误,但是编译器也不是万能的,如果程序写的不恰当,还是会发生错误,让程序崩溃.所以今天我们就来聊一聊Ru ...

  8. Rust入坑指南:朝生暮死

    今天想和大家一起把我们之前挖的坑再刨深一些.在Java中,一个对象能存活多久全靠JVM来决定,程序员并不需要去关心对象的生命周期,但是在Rust中就大不相同,一个对象从生到死我们都需要掌握的很清楚. ...

  9. Rust入坑指南:齐头并进(上)

    我们知道,如今CPU的计算能力已经非常强大,其速度比内存要高出许多个数量级.为了充分利用CPU资源,多数编程语言都提供了并发编程的能力,Rust也不例外. 聊到并发,就离不开多进程和多线程这两个概念. ...

随机推荐

  1. [Swift]LeetCode628. 三个数的最大乘积 | Maximum Product of Three Numbers

    Given an integer array, find three numbers whose product is maximum and output the maximum product. ...

  2. [Swift]LeetCode950. 按递增顺序显示卡牌 | Reveal Cards In Increasing Order

    In a deck of cards, every card has a unique integer.  You can order the deck in any order you want. ...

  3. 老司机教你用原生JDK 撸一个 MVC 框架!!!

    其实 Spring MVC 是一个基于请求驱动的 Web 框架,并且也使用了前端控制器模式来进行设计,再根据请求映射规则分发给相应的页面控制器进行处理,具体工作原理见下图. 在这里,就不详细谈相关的原 ...

  4. Oracle synonym 同义词

    Oracle synonym 同义词 1.Oracle synonym 同义词是数据库当前用户通过给另外一个用户的对象创建一个别名,然后可以通过对别名进行查询和操作,等价于直接操作该数据库对象. 2. ...

  5. Java8 LocalDateTime获取时间戳(毫秒/秒)、LocalDateTime与String互转、Date与LocalDateTime互转

    本文目前提供:LocalDateTime获取时间戳(毫秒/秒).LocalDateTime与String互转.Date与LocalDateTime互转 文中都使用的时区都是东8区,也就是北京时间.这是 ...

  6. 【Docker】(3)---linux部署Docker、Docker常用命令

    linux部署Docker.Docker常用命令 本次部署Linux版本:CentOS 7.4 64位. 说明: 因为Docker是基于Linux 64bit的 所以Docker要求64位的系统且内核 ...

  7. MongoDB exception:connection failed

    根据http://www.runoob.com/mongodb/mongodb-window-install.html的教程配置了MongoDB,Mongod.exe配置为 --port 指令表明mo ...

  8. Python爬虫入门教程 24-100 微医挂号网医生数据抓取

    1. 写在前面 今天要抓取的一个网站叫做微医网站,地址为 https://www.guahao.com ,我们将通过python3爬虫抓取这个网址,然后数据存储到CSV里面,为后面的一些分析类的教程做 ...

  9. synchronized学习

    现代软件开发中并发已经成为一项基础能力,而Java精心设计的高效并发机制,正是构建大规模应用的基础之一.本文中我们将学习synchronized关键字的基本用法. synchronized是Java内 ...

  10. 设计模式总结篇系列:代理模式(Proxy)

    时代在发展,我们发现,现在不少明星都开始进行微访谈之类的,有越来越多的参与捐赠等.新的一天开始了,首先看下新的一天的日程安排: interface Schedule{ public void weiT ...