今天利用了QQlight做了一个小网页
介绍起由
QQ群发的消息会自动的显示在那个网页上。iamxiongxiao。因为只要一个QQlight的服务端,然后可以实现,js的websocket获取消息,只要客户端连接那个websocket的端口,就可以获取得到那个QQ号,群的消息。所以我就发现能托管到github上,实现一个网页和QQ号接轨。网页获取QQ收到的消息,访问网页看到消息
使用的vue开发的网页
使用了Bootstrap-vue的包《好看》,其他就默认的就行了。 然后使用Websocket就接收消息。 开发出来就不说了。
我想让这个网页运行在电脑上的exe程序
我能利用electron,更方便的运行和打包。下图是我的exe程序的截图
打包的方式和遇到问题的解决和思考?
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")
什么的,我缩写了很多