vue-electron相关BUG处理

古城微笑少年丶 2022-09-05 05:24 17阅读 0赞

项目参考了：[https://github.com/percy507/hola][https_github.com_percy507_hola]

文章参考了：[https://blog.csdn.net/aeoliancrazy/article/details/117419918][https_blog.csdn.net_aeoliancrazy_article_details_117419918]

问题一：GET http://localhost:9080/\_\_webpack\_hmr 404 (Not Found)

修改.electron-vue文件夹中的dev-runner.js文件：

注释掉hot  
将原来的 app.use(hotMiddleware)注释打开

const server = new WebpackDevServer(
          compiler,
          {
            contentBase: path.join(__dirname, '../'),
            quiet: true,
            //hot: true,
            before (app, ctx) {
              app.use(hotMiddleware)
              ctx.middleware.waitUntilValid(() => {
                resolve()
              })
            }
          }
        )

问题二：终端如下报错

![20210817143749615.png][]

参考文章：[https://www.cnblogs.com/wozho/p/10782654.html][https_www.cnblogs.com_wozho_p_10782654.html]

下载 vue-devtools.crx，把文件名后缀改成zip后解压放在工程目录下  
（找不到或者懒得下可以直接克隆链接处作者的仓库后把这个文件夹给复制出来）

Electron-Vue中本来是应该预装好了vue-devtool的，奈何 electron-devtools-installer 这个库不知道有什么问题，只能自己手动装了，部分代码：

require('electron-debug')({ showDevTools: true })
    //关闭后可以用快捷键Ctrl+Shift+i，呼出控制台
    import {  BrowserWindow } from 'electron';
    // Install `vue-devtools`
    require('electron').app.on('ready', () => {
      // let installExtension = require('electron-devtools-installer')
      // installExtension.default(installExtension.VUEJS_DEVTOOLS)
      //   .then(() => {})
      //   .catch(err => {
      //     console.log('Unable to install `vue-devtools`: \n', err)
      //   })
      // 新增的：安装vue-devtools
      BrowserWindow.addDevToolsExtension('devTools/vue-devtools')  //手动加载vue-devtools，前提是 npm install vue-devtools --save-dev
    })
    
    // Require `main` process to boot app
    require('./index')

问题三：终端如下报错

![20210817163930805.png][]

则做如下处理  
In main/index.dev.js:

- require('electron-debug')({ showDevTools: true });
    + // NB: Don't open dev tools with this, it is causing the error
    + require('electron-debug')();

问题四：打包报错

*  ERROR in unknown: Unexpected token (171:63)

package.json的electron-store依赖不小心放到devDependencies里面去了，改回dependencies即可；

*  Error: Unresolved node modules: bufferutil, utf-8-validate

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70][]

//删除本地的electron-builder 使用全局的electron-builder来进行打包
    yarn remove electron-builder
    yarn add global electron-builder

*  electron\\install.js:54   throw err   ^

安装淘宝镜像

npm install -g cnpm -registry=https://registry.npm.taobao.org
    yarn add cnpm -g --registry=http://registry.npm.taobao.org

*  Package "electron-builder" is only allowed in "devDependencies". Please remove it from the "dependencies" section in your package.json.

如下所示：移动一下安装包位置

"devDependencies": {
        "electron": "^8.2.1",
        "electron-builder": "^22.4.1"
      },
      "dependencies": {
      }

*  build

cnpm run build

用yarn run build出现报错

问题五：打包成exe  
1、DOS 下，输入 npm install electron-packager -g全局安装我们的打包神器：

cnpm install electron-packager -g

2、将打包的命令设置在package.json的script中

"scripts": {
        "start": "electron .", 
        "packager": "electron-packager ./ Printer --platform=win32 --arch=x64  --overwrite"
      },

3、输入打包命令

cnpm run packager

4、最终效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 2][]

问题六：Uncaught Error: Function yaml.safeLoad is removed in js-yaml 4. Use yaml.load instead, which is now safe by default  
根据错误描述，找到yaml.safeLoad改为yaml.load

打包后出现一个奇怪的错误，一直说找不到某个文件，然后所有命令都改成了yarn，就没有报错

淘宝镜像安装

yarn config set registry https://registry.npm.taobao.org/
    yarn config set electron_mirror http://npm.taobao.org/mirrors/electron/

版本更新可以参考

[https://w3cjs.cn/content\_link/32][https_w3cjs.cn_content_link_32]

[https://segmentfault.com/a/1190000016674982][https_segmentfault.com_a_1190000016674982]

main文件夹的index.js增加如下代码

function createWindow(w, h) {
        vlog.info('======closed')
        /**
         * Initial window options
         */
        mainWindow = new BrowserWindow({
          height: h,
          useContentSize: true,
          width: w,
          webPreferences: {
            webSecurity: true,
            enableRemoteModule: true,
            nodeIntegrationInWorker: true,
            // 开启渲染进程中调用模块  即require
            nodeIntegration: true,
            nativeWindowOpen: true,
            contextIsolation: false,
            devTools: true,
            // webviewTag: true
          }
        })
    
        mainWindow.loadURL(winURL)
    
        mainWindow.on('closed', () => {
          vlog.info('======closed')
          mainWindow = null
          // 这个地方很关键，不要放到close中去关闭，不然打包后关闭客户端会报错
        })
    
    
        function updateHandle() {
          let message = {
            error: '检查更新出错',
            checking: '正在检查更新……',
            updateAva: '检测到新版本，正在下载……',
            updateNotAva: '现在使用的就是最新版本，不用更新'
          }
          let uploadUrl = 'http://10.100.2.151:8899/updata/' //云服务上的安装包地址
          autoUpdater.setFeedURL(uploadUrl)
          autoUpdater.on('error', function(error) {
            console.log('autoUpdater error=======',error)
            sendUpdateMessage(message.error)
            sendUpdateMessage(error)
          })
          autoUpdater.on('checking-for-update', function() {
            sendUpdateMessage(message.checking)
          })
          autoUpdater.on('update-available', function(info) {
            sendUpdateMessage(message.updateAva)
          })
          autoUpdater.on('update-not-available', function(info) {
            sendUpdateMessage(message.updateNotAva)
          })
          // 更新下载进度事件
          autoUpdater.on('download-progress', function(progressObj) {
            mainWindow.webContents.send('downloadProgress', progressObj)
          })
          autoUpdater.on('update-downloaded', function(event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {
            ipcMain.on('isUpdateNow', (e, arg) => {
              console.log('autoUpdater isUpdateNow====',arguments)
              console.log('autoUpdater 开始更新')
              autoUpdater.quitAndInstall()
            })   
            mainWindow.webContents.send('isUpdateNow')
          })
          //检查更新-
          ipcMain.on('checkForUpdate', () => {
            console.log('检查更新------》')
            autoUpdater.checkForUpdates()
          })
        }
        updateHandle();
        // 通过main进程发送事件给renderer进程，提示更新信息
        function sendUpdateMessage(text) {
          mainWindow.webContents.send('message', text)
        }
      }

触发的文件处

created() {
    
        console.log('================version,newVersion',version,newVersion)
        if(version<newVersion){
          console.error('------开始检查更新------')
          var ipcRenderer = window.require('electron').ipcRenderer
          ipcRenderer.send('checkForUpdate')
          ipcRenderer.on('message', (event, text) => {
            console.log('返回消息', text)
            this.tips = text
          })
          ipcRenderer.on('downloadProgress', (event, progressObj) => {
            console.log('下载', progressObj)
            this.progress = progressObj.percent
            this.downloadPercent = progressObj.percent || 0
          })
          ipcRenderer.on('isUpdateNow', () => {
            console.log('是否现在更新')
            this.$confirm('有新版本啦。。是否现在更新?', '提示', {
              confirmButtonText: '马上更新',
              cancelButtonText: '稍后更新',
              type: 'warning'
            }).then(() => {
              ipcRenderer.send('isUpdateNow')
            })
          })
        }
    
    
        window.addEventListener("message", (r) => {
          if (!r.detail) return;
          let d = r.detail;
          switch (d.type) {
            case "loginRecord":
              console.log(d);
              if (d.data) {
                this.uname = d.data.type > 0 ? d.data.email : d.data.uuid;
                this.upwd = d.data.upwd;
                this.userimg = d.data.img;
                d.data.checks ? (this.ridob = JSON.parse(d.data.checks)) : "";
                this.ridob[1].is ? this.httpLgoin() : "";
              }
              break;
            case "getAppuser":
              console.log("获取成功", d.data);
              this.userlist = d.data;
              this.getAppusershow = true;
              break;
            default:
              break;
          }
        });
        this.ipc.send("message", { type: "loginRecord" });
      },

package.json

"build": {
        "productName": "printer",
        "appId": "webrtc.w3cjs.cn",
        "directories": {
          "output": "build"
        },
        "publish": [
          {
            "provider": "generic",
            "url": "http://10.100.2.151:8899/updata/"
          }
        ],

然后执行build，生成出来的如果是1.0.1，然后再去修改成1.0.2 再build，然后 把latest.yml和1.0.2 版本的exe 放到http服务下，最后安装1.0.1版本的，就会下载更新了

[https_github.com_percy507_hola]: https://github.com/percy507/hola
[https_blog.csdn.net_aeoliancrazy_article_details_117419918]: https://blog.csdn.net/aeoliancrazy/article/details/117419918
[20210817143749615.png]: /images/20220829/dd7e64b890fb46d084fdaacedd1e44ac.png
[https_www.cnblogs.com_wozho_p_10782654.html]: https://www.cnblogs.com/wozho/p/10782654.html
[20210817163930805.png]: /images/20220829/53a884c6fbbd42a8b84f92e33f6fbd2e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70]: /images/20220829/93c2e48ed70d46ad8dca7ad6c65f0f88.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2021081810175846.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 2]: /images/20220829/3764688b2594432984bc942b13a3f673.png
[https_w3cjs.cn_content_link_32]: https://w3cjs.cn/content_link/32
[https_segmentfault.com_a_1190000016674982]: https://segmentfault.com/a/1190000016674982