菜单

electron入坑指南

2019年5月8日 - 金沙前端

尾巴

从此未来本身再商量怎么自动更新, 要是有疑难能够调换作者

ubuntu 下的运维图

金沙js777 1

electron-vue

1初步什么都不会, 所以用那个脚手架快速弄1个项目模板肯定是最佳的.
electron-vue模板项目弄好后, npm run dev 一切符合规律.
但当你开心的编写翻译打包项目时, 就意识GG了. 由于墙, 不能下载…

金沙js777,接着就生出了密密麻麻标题, 以下是自家对各类题目找到的缓解方案

electron-vue 编写翻译后运维空白

可见编写翻译后不意味着能够运营, 运转后意识一片空白,
通过武力在renderer.js里每1行输出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')

诸如此类暴力之后, 报了另3个荒谬, 说什么信赖模块 vue 未找到
金沙国际手机客户端,后台想了半天办法, 还是妥胁了
设置条件变量 ELECTRON_BUILDER_ALLOW_UNRESOLVED_DEPENDENCIES=1
忽略那些报错
(后来意识科学配置时平昔不会爆什么错或那警示的)
澳门金沙国际娱乐场,诸如此类打包出来可以运作了. 即便有几许大. 我也是前面才体会到为啥
electron-vue 要如此配置

electron入坑指南

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包就行了

接下来就能够在运转了

简介

electron 实际集成chrome浏览器和node景况, 运转你写的网页

参照他事他说加以调查小说

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"
  }
}

electron-builder 由于网络原因不能够下载

Error: connect ETIMEDOUT 52.216.65.240:443

增多以下天猫商城镜像到遇到变量

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

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

自个儿计算机上 2进制包缓存目录 有以下文件

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图