vue-electron，初始化及相关BUG处理

vue-electron，初始化及相关BUG处理

参考贴：
https://blog.csdn.net/weixin_39385430/article/details/116858625

https://segmentfault.com/a/1190000019487488

https://www.cnblogs.com/william1994/p/13894822.html

https://www.cnblogs.com/wozho/p/10782654.html

先按照，vue-electron的官网的步骤

https://simulatedgreg.gitbooks.io/electron-vue/content/cn/getting_started.html

可能会出现的问题

1.控制台，如下报错

http://localhost:9080/__webpack_hmr 404 (Not Found)

解决方案：

在.electron-vue的文件夹中的dev-runner.js文件

做如下图修改

    const server = new WebpackDevServer(
      compiler,
      {
        contentBase: path.join(__dirname, '../'),
        quiet: true,
        // hot: true,
        // hot: false,
        // 原 hot为true
        before (app, ctx) {
          app.use(hotMiddleware)//原，此行被注释
          ctx.middleware.waitUntilValid(() => {
            resolve()
          })
        }
      }
    )

注释掉hot

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

参考于，第一篇参考贴

2.如果输出终端，有如下报错

┏ Electron -------------------

  [11000:0615/095124.922:ERROR:CONSOLE(7574)] "Extension server error: Object not found: <top>", source: chrome-devtools://devtools/bundled/inspector.js (7574)
  
┗ ----------------------------

则做如下处理

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')();

参考于，第二篇参考贴

3.如果输出终端，有如下报错

错误原因是，在生成桌面的应用的时候，没有vue-devtools插件，则会报错，并会重复请求，直至超时

解决方式，如下

在src/main/index.dev.js文件做如下修改

/**
 * This file is used specifically and only for development. It installs
 * `electron-debug` & `vue-devtools`. There shouldn't be any need to
 *  modify this file, but it can be used to extend your development
 *  environment.
 */

/* eslint-disable */

// Install `electron-debug` with `devtron`
// 下行注释，关闭默认开启的控制台
// require('electron-debug')({ showDevTools: true })
require('electron-debug')();
//关闭后可以用快捷键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')

vue-devtools插件，下载，请参照第四篇参考帖子，进行下载

注意

BrowserWindow.addDevToolsExtension('devTools/vue-devtools')

上述代码的文件路径，直接这么写的意思是，在项目的根目录下，在配置的时候，请注意文件路径

注意

正常安装，vue-devtools工具，常规手段是无法正常安装上的，请注意