Question

我正在构建具有多个窗口的电子战应用程序，我正在使用vue-router。

从Visual Studio Code终端（开发模式）运行时，该应用程序运行良好，但是在将其构建用于生产环境后，我得到了白屏。

这是我的代码

public / index.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 / router.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"
  }
}

在启动应用程序时，将显示一个登录窗口，成功登录后，该登录窗口将关闭并打开另一个窗口。

要打开一个窗口，我在background.ts中创建了函数createWindow，该函数将路由器路径作为第一个参数。例如，要创建登录窗口，请调用createWindow('/', options)，并在成功登录后创建主应用程序窗口，请编写createWindow('/main', options)。

我认为我的问题出在window.loadUrl的{{1}}内的createWindow中，但是我不确定生产模式应该使用正确的URL。

请提前告知并感谢。

Answer 1

最后，我可以使window.loadUrl可以用于生产版本，如下所示：

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

上面的代码可以正常工作，但是它只会打开在vue-router路由列表中具有路径“ /”的登录窗口。

要为“ / main”之类的另一条路线打开一个窗口，我尝试将哈希和该路线附加到路径名上，如下所示：

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

但是它不起作用，在开发工具的“网络”标签上，我看到此错误：

名称：index.html％23 /状态：（已阻止：其他）

请咨询

编辑：将hash属性添加到传递给formatUrl的选项对象之后，而不是手动附加到pathname上，所有方法都起作用：

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

构建我的Electro-Vue应用进行生产后的白屏

1 个答案: