Question

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

当我通过serve运行它时，效果很好：

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的新手，在这一点上我不知道到底是什么错误。

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>

Electron VueJS-生成错误-无法注册应用协议。在app.asar中找不到ENOENT，\ dist_electron \ bundled

1 个答案: