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工具,常规手段是无法正常安装上的,请注意