為生產構建我的電子 vue 應用程序后出現白屏

Question

我正在構建一個帶有多個 windows 的電子 vue 應用程序，我正在使用 vue-router。

該應用程序在從 Visual Studio Code 終端（開發模式）運行時運行良好，但在為生產構建它之后，我得到一個白屏。

這是我的代碼

公共/索引.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>EmaFlow Work Sessiong Tracker</title>
</head>

<body>
  <noscript>
    <strong>We're sorry but statement-ts doesn't work properly without JavaScript enabled. Please enable it to
      continue.</strong>
  </noscript>

  <div id="app" class="h-100"></div>

  <!-- built files will be auto injected -->
</body>

</html>

src/App.vue

<template>
  <div id="app" class="h-100">
    <router-view />
  </div>
</template>

src/路由器.ts

import Vue from 'vue';
import Router from 'vue-router';

import LoginWindow from '@/views/LoginWindow.vue';
import MainWindow from '@/views/MainWindow.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'login',
      component: LoginWindow,
    },
    {
      path: '/main',
      name: 'main',
      component: MainWindow,
    },
  ],
});

src/main.ts

import Vue from 'vue';
import VeeValidate from 'vee-validate';
import VueTimers from 'vue-timers'

import App from './App.vue';
import router from './router';

Vue.use(VeeValidate);

Vue.use(VueTimers)

Vue.config.productionTip = false;

new Vue({
  router,
  render: (h) => h(App),
}).$mount('#app');

import $ from 'jquery'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.bundle.min.js'
import '@fortawesome/fontawesome-free/js/all.min.js';

src/background.ts

'use strict'

import { app, protocol, BrowserWindow, ipcMain, Event } from 'electron'
import {
  createProtocol,
  installVueDevtools
} from 'vue-cli-plugin-electron-builder/lib'

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

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

const appWindows: BrowserWindow[] = [];

function createWindow(slug: string, options?: object) {
  const defaultOptions = {
    width: 800,
    height: 600,
    frame: false,
    webPreferences: {
      nodeIntegration: true,
    },
  };
  const windowOptions = Object.assign({}, defaultOptions, options);
  const window = new BrowserWindow(windowOptions);
  appWindows.push(window);

  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    window.loadURL(process.env.WEBPACK_DEV_SERVER_URL as string + '/#' + slug);
    window.webContents.openDevTools();
  } else {
    createProtocol('app')
    // Load the index.html when not in development
    window.loadURL('app://./index.html' + '/#' + slug);
  }

  window.on('closed', () => {
    appWindows.splice(appWindows.indexOf(window), 1);
  });
}

function createLoginWindow() {
  createWindow('/', {
    width: 400,
    height: 300,
    resizable: isDevelopment,
  });
}

// 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 installVueDevtools();
    } catch (e) {
      // console.error('Vue Devtools failed to install:', e.toString());
    }
  }

  createLoginWindow();
});

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 (appWindows.length === 0) {
    createLoginWindow();
  }
})

// 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()
  }
})

ipcMain.on('open-window', (e: Event, arg: WindowParams) => {
  createWindow(arg.route, arg.options);
});

// 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()
    })
  }
}

package.json

{
  "name": "emaflow-worksession-tracker",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "lint": "vue-cli-service lint",
    "build": "vue-cli-service electron:build",
    "serve": "vue-cli-service electron:serve",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps"
  },
  "main": "background.js",
  "dependencies": {
    "axios": "^0.19.0",
    "bootstrap": "^4.3.1",
    "core-js": "^2.6.10",
    "howler": "^2.1.2",
    "jquery": "^3.4.1",
    "popper.js": "^1.15.0",
    "typescript": "^3.6.4",
    "vee-validate": "^2.2.15",
    "vue": "^2.6.10",
    "vue-class-component": "^7.0.2",
    "vue-property-decorator": "^8.2.2",
    "vue-router": "^3.1.3",
    "vue-timers": "^2.0.4"
  },
  "devDependencies": {
    "@fortawesome/fontawesome-free": "^5.11.2",
    "@vue/cli-plugin-babel": "^3.12.0",
    "@vue/cli-plugin-typescript": "^3.12.0",
    "@vue/cli-service": "^3.12.0",
    "electron": "^5.0.11",
    "stylus": "^0.54.7",
    "stylus-loader": "^3.0.2",
    "vue-cli-plugin-electron-builder": "^1.4.0",
    "vue-template-compiler": "^2.6.10"
  }
}

在應用程序啟動時，將顯示登錄 window，成功登錄后，登錄 window 將關閉並打開另一個 window。

要打開 window，我在background.ts中創建了 function createWindow ，它將路由器路徑作為第一個參數。 例如，要創建登錄 window 我調用createWindow('/', options)並在成功登錄后創建主應用程序 window 我寫createWindow('/main', options) 。

我認為我的問題出在window.loadUrl中的createWindow中background.ts ，但我不確定正確的 url 應該用於生產模式。

請提前告知和感謝。

Answer 1

最后我可以讓window.loadUrl為生產版本工作，如下所示：

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

上面的代碼正在運行，但它只打開登錄 window，它在 vue-router 路由列表中具有路徑“/”。

要打開 window 的另一條路線，如“/main”，我嘗試 append 和 hash 和路徑名的路線，如下所示：

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

但它不起作用，在開發工具網絡選項卡上我看到了這個錯誤：

名稱：index.html%23/ 狀態：（阻止：其他）

請指教

編輯：在將hash屬性添加到傳遞給formatUrl而不是手動附加到pathname的選項 object 之后，所有工作都有效：

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

為生產構建我的電子 vue 應用程序后出現白屏

問題描述

1 個解決方案

解決方案1
0 已采納 2019-11-12 19:52:34

為生產構建我的電子 vue 應用程序后出現白屏

問題描述

1 個解決方案

解決方案1 0 已采納 2019-11-12 19:52:34

解決方案1
0 已采納 2019-11-12 19:52:34