vuejs2 - Electron VueJS - 构建错误 - 无法注册应用程序协议。在 app.asar 中找不到 ENOENT、\dist_electron\bundled

Question

我使用 Electron 和 VueJS 制作了一个小型 Windows 桌面应用程序。

当我使用服务运行它时它工作正常：

npm run serve:electron

但是，当我使用以下命令构建应用程序时，应用程序出错并留下一个空白窗口。（再次使用 vue-cli-service）

npm run build:electron

当我使用控制台 cd 进入 .exe 文件并运行 vue-autobot --debug 时出现以下错误：

C:\projects\vue-autobot\dist_electron\win-unpacked>
Failed to register app protocol { Error: ENOENT, dist_electron\bundled\ not found in C:\projects\vue-autobot\dist_electron\win-unpacked\resources\app.asar
    at notFoundError (ELECTRON_ASAR.js:108:19)
    at fs.readFile (ELECTRON_ASAR.js:511:16)
    at Function.A.n.protocol.registerBufferProtocol (C:\projects\vue-autobot\dist_electron\win-unpacked\resources\app.asar\dist_electron\bundled\background.js:1:160484) code: 'ENOENT', errno: -2 }

样板： drehimself/electron-vue-example

我的 package.json

{
  "name": "vue-autobot",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "build:electron": "vue-cli-service build:electron",
    "postinstall": "electron-builder install-app-deps",
    "serve:electron": "vue-cli-service serve:electron"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.6",
    "@fortawesome/free-solid-svg-icons": "^5.4.1",
    "@fortawesome/vue-fontawesome": "^0.1.1",
    "bootstrap-vue": "^2.0.0-rc.11",
    "jquery": "^3.3.1",
    "vue": "^2.5.17",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.0.5",
    "@vue/cli-plugin-eslint": "^3.0.5",
    "@vue/cli-service": "^3.0.5",
    "electron": "^3.0.4",
    "vue-cli-plugin-electron-builder": "^1.0.0-rc.3",
    "vue-template-compiler": "^2.5.17"
  },
  "main": "dist_electron/bundled/background.js"
}

这是我的 background.js（电子主文件）

'use strict'

import { app, protocol, BrowserWindow } from 'electron'
import * as path from 'path'
import { format as formatUrl } from 'url'
import {
  createProtocol,
  installVueDevtools
} from 'vue-cli-plugin-electron-builder/lib'
const isDevelopment = process.env.NODE_ENV !== 'production'
if (isDevelopment) {
  // Don't load any native (external) modules until the following line is run:
  require('module').globalPaths.push(process.env.NODE_MODULES_PATH)
}

// global reference to mainWindow (necessary to prevent window from being garbage collected)
let mainWindow

// Standard scheme must be registered before the app is ready
protocol.registerStandardSchemes(['app'], { secure: true })
function createMainWindow () {
  const window = new BrowserWindow()

  if (isDevelopment) {
    // Load the url of the dev server if in development mode
    window.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    if (!process.env.IS_TEST) window.webContents.openDevTools()
  } else {
    createProtocol('app')
    //   Load the index.html when not in development
    window.loadURL(
      formatUrl({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file',
        slashes: true
      })
    )
  }

  window.on('closed', () => {
    mainWindow = null
  })

  window.webContents.on('devtools-opened', () => {
    window.focus()
    setImmediate(() => {
      window.focus()
    })
  })

  return window
}

// quit application when all windows are closed
app.on('window-all-closed', () => {
  // on macOS it is common for applications to stay open until the user explicitly quits
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // on macOS it is common to re-create a window even after all windows have been closed
  if (mainWindow === null) {
    mainWindow = createMainWindow()
  }
})

// create main BrowserWindow when electron is ready
app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    await installVueDevtools()
  }
  mainWindow = createMainWindow()
})

我是 VueJS 和 Electron 的新手，目前我不知道到底出了什么问题。

标签： vuejs2electronelectron-builder

Answer 1

所以我想通了。问题最终变得非常简单，但错误只是让我（方式）离开。

事实证明，我的on-click水平比href="#". 这导致我<body></body>被渲染为空。

<li>
  <router-link href="#" to="/">
    <span class="label" v-on:click="turnOffSidebar()">Dashboard</span>
    <font-awesome-icon icon="tachometer-alt" />
  </router-link >
</li>

当然，正确的解决方案很简单：

<li>
  <router-link href="#" to="/" v-on:click="turnOffSidebar()">
    <span class="label">Dashboard</span>
    <font-awesome-icon icon="tachometer-alt" />
  </router-link >
</li>