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. 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)
  //   })
  // 新增：安装vue-devtools
  BrowserWindow.addDevToolsExtension('node_modules/vue-devtools/vender')  //手动加载vue-devtools，前提是 npm install vue-devtools --save-dev
})

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

虽然解决了窗口增加vue-devtools的问题，也可以正常运行，但是控制台依然报错Extension server error: Operation failed: : has no execution context", source: chrome-devtools://devtools/bundled/inspector.js (7574)，不过不影响使用。如果有大佬知道如何解决可以私聊我一下，谢谢！

控制台报错Multispinner is not defined

解决：

找到

.electron-vue/build.js

增加引用语句在文件前几行

const Multispinner = require(‘multispinner’)

F12报错Object.fromEntries is not a function

解决: 安装polyfill-object.fromentries

npm i polyfill-object.fromentries --save

再找到文件

.electron-vue/dev-client.js

头部加入

import ‘polyfill-object.fromentries’;

执行npm run build无法打包 提示 Identifier 'tasks' has already been declared

大概的错误就是build.js中tasks变量重复声明

解决：

找到：

.electron-vue/build.js

修改代码，修改其中一对的tasks变量名，需要注意的是本文件中一共包含四个tasks, 修改的时候注意不要改错

修改前：

  const tasks = ['main', 'renderer']
  const m = new Multispinner(tasks, {
    preText: 'building',
    postText: 'process'
  })

修改后

  const tasks1 = ['main', 'renderer']
  const m = new Multispinner(tasks1, {
    preText: 'building',
    postText: 'process'
  })

编译为exe安装文件

两种方式electron-builder和electron-packager，这里使用electron-builder

注意，此时你如果直接使用package.json里的build命令，虽然控制台在编译，但是结束后你会发现没有任何文件新增，

这里要安装一下electron-builder 推荐全局安装

npm i electron-builder -g

接着去项目里的package.json文件里，给build命令增加：

"scripts": {
    "build": "node .electron-vue/build.js && electron-builder",
    ... // 这里后面的不列出
  },

再增加编译的配置

"build": {
    "productName":"xxxx",//项目名 这也是生成的exe文件的前缀名
    "appId": "com.leon.xxxxx",//包名  
    "copyright":"xxxx",//版权  信息
    "directories": { // 输出文件夹
      "output": "build"
    }, 
    "nsis": {
      "oneClick": false, // 是否一键安装
      "allowElevation": true, // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
      "allowToChangeInstallationDirectory": true, // 允许修改安装目录
      "installerIcon": "./build/icons/aaa.ico",// 安装图标
      "uninstallerIcon": "./build/icons/bbb.ico",//卸载图标
      "installerHeaderIcon": "./build/icons/aaa.ico", // 安装时头部图标
      "createDesktopShortcut": true, // 创建桌面图标
      "createStartMenuShortcut": true,// 创建开始菜单图标
      "shortcutName": "xxxx", // 图标名称
      "include": "build/script/installer.nsh", // 包含的自定义nsis脚本
    },
    "publish": [
      {
        "provider": "generic", // 服务器提供商 也可以是GitHub等等
        "url": "http://xxxxx/" // 服务器地址
      }
    ],
    "files": [
      "dist/electron/**/*"
    ],
    "dmg": {
      "contents": [
        {
          "x": 410,
          "y": 150,
          "type": "link",
          "path": "/Applications"
        },
        {
          "x": 130,
          "y": 150,
          "type": "file"
        }
      ]
    },
    "mac": {
      "icon": "build/icons/icon.icns"
    },
    "win": {
      "icon": "build/icons/aims.ico",
      "target": [
        {
          "target": "nsis",
          "arch": [
            "ia32"
          ]
        }
      ]
    },
    "linux": {
      "icon": "build/icons"
    }
  }

接着在build文件夹内新增nsh文件

build/script/installer.nsh

编辑installer.nsh文件，增加内容

!macro preInit
    SetRegView 64
    WriteRegExpandStr HKLM "${INSTALL_REGISTRY_KEY}" InstallLocation "C:\projectName\hhyh-tool"
    WriteRegExpandStr HkCU "${INSTALL_REGISTRY_KEY}" InstallLocation "C:\projectName\hhyh-tool"
    SetRegView 32
    WriteRegExpandStr HKLM "${INSTALL_REGISTRY_KEY}" InstallLocation "C:\projectName\hhyh-tool"
    WriteRegExpandStr HkCU "${INSTALL_REGISTRY_KEY}" InstallLocation "C:\projectName\hhyh-tool"
!macroend

大致就是安装后或者安装前，设置或读取注册表。

此时，再运行npm run build就可以正常打包为.exe的安装文件了