今天利用了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")什么的，我缩写了很多