Vue Плагин CLI Electron Builder показывает полностью пустой экран при сборке - PullRequest
Новая
       108

Vue Плагин CLI Electron Builder показывает полностью пустой экран при сборке

0 голосов
/ 05 августа 2020

Когда я создаю свое электронное приложение с этим плагином , все, что я получаю при установке пакета, - это пустой белый экран. Я настроил окно для открытия инструментов разработчика во встроенной версии, но когда я смотрю на меню проверки, единственное содержимое на странице - это теги <html>, <head> и <body>, и ошибок нет. ; консоль полностью пуста:

blank screen

Elements: elements

Console: приставка

Я искал практически везде в Интернете, но ни одно из решений там не помогло.

Я попытался изменить режим маршрутизатора с истории на ha sh, а также запустить vue invoke electron-builder, но они не помогли.

Насколько я могу судить, это не работает: 

win.loadURL('app://index.html')

из-за неверного пути. Но я не знаю, так ли это или что-то еще, поскольку сообщений об ошибках нет.

Вот мой background.js файл: 

'use strict'

import { app, protocol, BrowserWindow } from 'electron'
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'

const isDevelopment = process.env.NODE_ENV !== 'production'

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win

// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
  { scheme: 'app', privileges: { secure: true, standard: true } }
])

function createWindow() {
  // Create the browser window.
  win = new BrowserWindow({
    width: 1500,
    height: 845,
    webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: true,
      enableRemoteModule: true
    }
  })


  win.removeMenu()
  win.webContents.openDevTools();
  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    // if (!process.env.IS_TEST) win.webContents.openDevTools();
  } else {
    createProtocol('app')
    // Load the index.html when not in development
    win.loadURL('app://index.html')
  }
  win.once('ready-to-show', () => {
    win.show();
  })

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

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (win === null) {
    createWindow()
  }
})

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    try {
      await installExtension(VUEJS_DEVTOOLS)
    } catch (e) {
      console.error('Vue Devtools failed to install:', e.toString())
    }
  }
  createWindow()
})



// Exit cleanly on request from parent process in development mode.
if (isDevelopment) {
  if (process.platform === 'win32') {
    process.on('message', (data) => {
      if (data === 'graceful-exit') {
        app.quit()
      }
    })
  } else {
    process.on('SIGTERM', () => {
      app.quit()
    })
  }
}

Как я могу это исправить проблема?

1 Ответ

0 голосов
/ 05 августа 2020

Итак, после большего количества поисков в Google, я наткнулся на этот сайт , который предлагал сделать следующее:

Замените значение по умолчанию win.loadURL() (которое может выглядеть так: 

win.loadURL(formatUrl({
      pathname: path.join(__dirname, 'index.html');,
      protocol: 'file',
      slashes: true
    }))

или может быть иначе; это не имеет значения), с этим: 

win.loadURL(path.join(__dirname, 'index.html'));

По сути, разница в том, что это просто удаляет formatUrl, который, кажется, все портит.

Я заменил свой, который был: 

win.loadURL("app://./index.html");

на это, и теперь он работает нормально.

Также убедитесь, что вы не удалили createProtocol('app'), если он есть тоже (это было на несколько строк выше win.loadUrl()), потому что от него могут зависеть другие функции.

...