Vue3 Electron 子组件/路由未显示

Question

所以我一直在使用 Vue3 (v3.2.25) 和 Electron (v16.0.7) 中的应用程序。 我一直在使用 vue-router4 在应用程序内的页面之间导航。 我注意到在开发过程中我的应用程序运行良好。 一切都按照它应该的方式加载但是在生产中（构建时）electron 应用程序不会呈现与路由器<router-view/>的所有内容。

作为第一个组件加载的我的 App.vue 文件：

<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
</script>

<template>
  <h1>bpe</h1>
  <router-view />
</template>

渲染了bpe 。 但不是路由器

我的路由器：

import {
  createRouter,
  createWebHashHistory,
  createWebHistory,
  Router,
  RouteRecordRaw,
} from "vue-router";

const routes: RouteRecordRaw[] = [
  {
    path: "/",
    component: () => import("../pages/Login.vue"),
  },
  {
    path: "/dashboard/",
    component: () => import("../pages/dashboard/Home.vue"),
  },
];

const router: Router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

我的 vue main.ts

import { createApp } from "vue";
import App from "./App.vue";
import "./assets/tailwind.css";
import router from "./middleware/router";

const app = createApp(App);

app.use(router);

app.mount("#app");

electron.js：

const path = require("path");
const { app, BrowserWindow } = require("electron");
const log = require("electron-log");
const isDev = process.env.IS_DEV == "true" ? true : false;
const { autoUpdater } = require("electron-updater");
autoUpdater.logger = log;
autoUpdater.logger.transports.file.level = "info";
autoUpdater.setFeedURL({
  token: "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",
  owner: "Gezellligheid",
  repo: "bandi-app",
  provider: "github",
});

// import { autoUpdater } from "electron-updater";

function createWindow() {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,

    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
      nodeIntegration: true,
    },
  });

  // and load the index.html of the app.
  // win.loadFile("index.html");
  mainWindow.loadURL(
    isDev
      ? "http://localhost:3000"
      : `file://${path.join(__dirname, "../dist/index.html")}`
  );
  // Open the DevTools.
  if (isDev) {
    mainWindow.webContents.openDevTools();
  }
  // if (!isDev) {
  //   mainWindow.removeMenu();
  // }
}
autoUpdater.on("checking-for-update", () => {
  console.log("Checking for update...");
});
autoUpdater.on("update-available", (info) => {
  console.log("Update available.", info);
});
autoUpdater.on("update-not-available", (info) => {
  console.log("Update not available.", info);
});
autoUpdater.on("error", (err) => {
  console.log("Error in auto-updater. " + err);
});
autoUpdater.on("download-progress", (progressObj) => {
  let log_message = "Download speed: " + progressObj.bytesPerSecond;
  log_message = log_message + " - Downloaded " + progressObj.percent + "%";
  log_message =
    log_message +
    " (" +
    progressObj.transferred +
    "/" +
    progressObj.total +
    ")";
  console.log(log_message);
});
autoUpdater.on("update-downloaded", (info) => {
  console.log("Update downloaded", info);
});
// 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.whenReady().then(() => {
  autoUpdater.checkForUpdatesAndNotify();
  createWindow();
  app.on("activate", function () {
    // 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 (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

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

任何帮助，将不胜感激！

Answer 1

我有同样的问题。 我找到了这个解决方案，对我来说效果很好。 尝试将路由器文件更改为：

import { createRouter, createWebHashHistory } from 'vue-router'

// ...

const router: Router = createRouter({
  history: createWebHashHistory(),
  routes,
});

// ...

Electron 似乎只适用于 WebHashHistory。