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

前言

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()
          })
        }
      }
    )

控制台报错Unable to install vue-devtools

解决：

首先给项目安装vue-devtools

npm install vue-devtools --save-dev

接着找到

src/main/index.dev.js

修改代码:

/**
 * This file is used specifically and only for development.