electron-vue安装及初始化报错处理

最新推荐文章于 2026-07-14 16:46:00 发布

原创最新推荐文章于 2026-07-14 16:46:00 发布 · 1.5k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

electron

vue

本文档介绍了如何安装和配置Electron-Vue项目，包括使用vue-cli初始化，安装依赖，以及处理启动项目时可能出现的错误。在启动过程中，可能会遇到webpack热更新失败和缺少vue-devtools导致的报错。解决方法包括禁用hot middleware，手动添加vue-devtools扩展。此外，还提供了对src/main/index.dev.js的修改建议以避免报错。

安装electron-vue

参考文档

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

1.安装前首先需要安装vue-cli

npm install -g vue-cli

2.安装electron-vue

vue init simulatedgreg/electron-vue my-project

3.一直按Enter键，ESLint和Karma + Mocha根据自己的需求选装（图下是没有进行安装）
在这里插入图片描述
4.安装依赖

cd my-project // 进入项目
npm install   // 安装依赖

5.启动项目

npm run dev

初始化报错处理

1.控制台，如下报错

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

在这里插入图片描述
解决方案：

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

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

在这里插入图片描述
2.如果输出终端，有如下报错

在这里插入图片描述
错误原因是，在生成桌面的应用的时候，没有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 })
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)
  //   })
	
	BrowserWindow.addDevToolsExtension('devTools/vue-devtools')
})

// Require `main` process to boot app
require('./index')

标签

#vue #js