electron-vue项目从搭建、运行到打包（以及electron-vue的bug修改）

原创

已于 2022-12-14 08:47:52 修改 · 4.9k 阅读

于 2022-12-12 15:03:04 首次发布

本文介绍了如何使用Electron-Vue框架构建桌面应用，包括安装、运行、解决运行时遇到的错误，如F12报错、控制台错误以及打包问题。在开发过程中，作者分享了遇到的bug和相应的解决方案，如修改Electron-Vue的源文件，安装额外依赖等，最后详细说明了如何将项目编译为exe安装文件。

文章目录

前言

Electron 是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架，它的出现让我们广大前端开发者的技术栈又多了一个分支。让我们使用JavaScript 代码就可创建在 Windows、macOS 和 Linux 上运行的跨平台应用程序。

在开发中，作为一名前端开发者，难免会想着用Vue和Electron结合起来开发。有人做了这件事

Electron-Vue诞生，它可以让我们快速的建立Electron项目，并且让我们专注于页面的开发

但是，在使用过程中，发现碰到的bug有点多，所以成功建立一个可成功运行可成功编译的项目，还要修改一些Electron自己的文件，做个记录。

安装和运行

安装Vue cli 脚手架建议-g全局安装，也方便以后创建其他的项目

npm install -g @vue/cli
# OR
yarn global add @vue/cli

快速创建Electron-vue初始化项目

vue init simulatedgreg/electron-vue my-project

在这里插入图片描述

进入项目，并安装依赖

# Install dependencies and run your app
cd my-project
yarn # or npm install
yarn run dev # or npm run dev

运行会发现的错误

F12报错`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, // 注掉
        before (app, ctx) {
   
   
          app.use(hotMiddleware) // 注释解开
          ctx.middleware.waitUntilValid(() => {
   
   
            resolve()
          })
        }
      }
    )