2019-04-04 Vue3.5+ electron和electron-packager使用终端应用

今天利用了QQlight做了一个小网页

介绍起由

QQ群发的消息会自动的显示在那个网页上。iamxiongxiao。因为只要一个QQlight的服务端,然后可以实现,js的websocket获取消息,只要客户端连接那个websocket的端口,就可以获取得到那个QQ号,群的消息。所以我就发现能托管到github上,实现一个网页和QQ号接轨。网页获取QQ收到的消息,访问网页看到消息

使用的vue开发的网页

使用了Bootstrap-vue的包《好看》,其他就默认的就行了。 然后使用Websocket就接收消息。 开发出来就不说了。

我想让这个网页运行在电脑上的exe程序

我能利用electron,更方便的运行和打包。下图是我的exe程序的截图


electron

打包的方式和遇到问题的解决和思考?

1. 引入包,npm i install electron electron-packager 为重点1

2. 配置package.json,electron是开发测试,运行,electron_build是打包运行

    "electron": "electron electron/electron.js",
    "electron_build": "electron-packager ./dist click --platform=win32 --arch=x64 --icon=./src/assets/favicon.ico --overwrite --asar"

3. 配置electron.js,称为electron程序的入口文件

我设置的是在electron/electron.js中的,入口文件必须。npm run electron 配置正确理论上可以运行程序了
electron.js配置内容,官方案列electron-quick-start 加载自己的index.html
我是用的(修改了本身的mainWindow.loadFile) 为重点2

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

4. vue打包build, 因我是默认配置

发现脚手架vue-cli npm run build生成的index.html,缺少了引入JS内容,经过测试,把里面js的/js前面那个/取消掉,可以引入,是因为默认配置绝对路径问题。配置vue项目的打包配置。如图,配置相对路径为./

5. 使用electron-package打包出现问题

问题1.打包出现,无效app应用,翻译过来就是。可能是package.json没有放进去。重点3,vue生产出来dist中的文件,需要添加package.json

问题2.引入了package.json,发现没有index.js的入口文件,重点4 放electron.js的入口文件进去,自取名字,package.json需要设置main.js进入。

问题3. 发现打包成功后,界面空白,因为electron.js从electron的目录引入过来,然后里面加载的indx.html路径出错,没有引入正确的index.html。 再次修改正确的入口文件
我最后的拷贝进去的package.json不是外面的那个,而是和官方案列类似的一种。如我的

{
  "name": "click",
  "version": "1.0.0",
  "description": "Electron click application",
  "main": "electron.js",
  "scripts": {
    "start": "electron ."
  }
}

理论上可以成功了。我之前思考如何index.html引入js,或者css,对于他里面<script src="js/index.js"/>等等我需要怎么引入,是不是需要另配置,其实不需要,index.html引入的是正确的,对于网站是绝对路径,对于electron.js打包需要相对的路径,如果打包是正确的,那么是可以实现的。

vue3.5 + electron + electron-packager 打包window应用程序总结:

vue3.5 build生产的web页面,需要打包修改配置相对路径,vue.config.js,配置类似publicPath = './'

electron 开发只需要一个入口文件,electron.js或者其他名字,直接运行electron electron.js便能成功

electron-packager 打包,在打包的目录下,需要你要打包的网页,需要package.json也需要electron.js的入口文件
其中package.json需要main指向那个入口文件名字
入口名字例electron.js需要指向那个加载网站入口的名字,比如louadURL("./index.html")什么的,我缩写了很多

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,080评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,422评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,630评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,554评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,662评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,856评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,014评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,752评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,212评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,541评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,687评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,347评论 4 331
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,973评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,777评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,006评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,406评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,576评论 2 349

推荐阅读更多精彩内容