搭建 electron-vue 项目

前言

electron-vue 是一个基于 vue 来构造 electron 应用程序的样板代码。electron-vue 充分利用vue-cli 作为脚手架工具，加上拥有 vue-loader 的 webpack、electron-packager 或是electron-builder，以及一些最常用的插件，为开发 electron 项目提供了极大的便利，详情可以参考官网 Electron-Vue

一、起步

1、安装 vue-cli 脚手架

npm install -g vue-cli

2、创建项目

vue init simulatedgreg/electron-vue projectName

projectName 可以根据自己需求进行命名更改，这个是你的项目名，也是文件夹的名称

3、进入项目并运行项目

cd projectName
npm run dev

通过以上命令已经可以正确的运行项目了，但是因为我在项目中删除了 node_modules 之后再 npm i 的时候报错 node-sass 无法安装，所以这里推荐手动的删除掉 package.json 中的 node-sass 并添加 sass 依赖

"sass": "^1.23.7"

添加完以后可以删掉 node_modules 再运行 npm i 就不会报错了，同时项目中可以正常的使用 sass

二、拓展

1、升级 Electron

electron-vue 为了项目稳定，electron 的版本固定在了 2.0.4，但是 electron 是一直在更新的，官网的 API
也一直在拓展，如果想使用最新的官网API 还需要对 electron-vue 中的 electron 进行升级。

我个人建议升级到 12.0.11，升级到太高版本容易出现其他问题。

1.1、升级前准备

升级前需要先卸载当前的 electron，需要执行以下命令

npm uninstall electron

1.2、安装新的 Electron

npm install electron@12.0.11

1.3、报错解决

升级成功之后通过 npm run dev 运行项目的时候会遇到以下报错，这个时候需要在 BrowserWindow 的配置中添加 nodeIntegration 属性来解决问题

mainWindow = new BrowserWindow({
    height: 720,
    width: 1280,
    minHeight: 600,
    minWidth: 1000,
    frame: false,  // 无边框
    webPreferences: {
      nodeIntegration: true,  // 在网页中集成Node
      contextIsolation: false,
      enableRemoteModule: true,
      nativeWindowOpen: true
    }
 })

这个时候再运行项目就不会有报错了

2、__webpack_hmr 404 报错问题

解决方案

找到.electron-vue/dev-runner.js 文件，注释掉 hot 并解除 app.use(hotMiddleware) 的注释，改完以后再运行项目就不会有报错了