个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-03 12:28:17 25 4
gpt4 key购买 nike

我正在构建具有多个窗口的Electronic-Vue应用程序，正在使用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的 createWindow内的 background.ts中，但是我不确定生产模式应该使用的正确URL。

请提前告知并感谢。

最佳答案

最后，我可以使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
}));

关于node.js - 构建我的Electro-Vue应用进行生产后的白屏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58413806/

25 4 0
文章推荐： node.js - Electron-Builder:在MacOS上使用松鼠构建Windows安装程序失败
文章推荐： electron - Electron window.webContents.send不起作用
文章推荐： electron - 如何在 Electron 应用程序中实现 ngxs 托管状态的存储
文章推荐： npm - 使用 Electron 生成器时 “npm run dist”有问题
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com