electron 电子渲染空白页一旦我实现vue-router

ffdz8vbo  于 2023-05-27  发布在  Electron
关注(0)|答案(1)|浏览(253)

我目前正在使用Vue 3和Electron构建应用程序。但是一旦我实现了vue-router,我只能看到空白页。
我分别安装了vue 3和electron。如果我只渲染组件而不是路由器视图,那就完全没问题了。
这是我的方法。

vite.config.js
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  base: path.resolve(__dirname, "./dist/"),
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      vue: 'vue/dist/vue.esm-bundler.js'
    }
  }
})
main.js
const { app, BrowserWindow } = require("electron");
const path = require("path");

function createWindow() {
  const win = new BrowserWindow({
    width: 500,
    height: 500,
    frame: false,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
    },
  });

  win.loadFile(`${__dirname}/dist/index.html`);
  win.setAlwaysOnTop(true);
}

app.whenReady().then(() => {
  createWindow();
});
Vue/main.js
import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'

createApp(App).use(store).use(router).mount('#app')
router.js
import { createWebHistory, createRouter } from "vue-router";

import LoginPage from '../pages/LoginPage.vue';
import RegisterPage from '../pages/RegisterPage.vue';
import HomePage from '../pages/HomePage.vue';

const routes = [
  {
    path: "/login",
    name: "Login",
    component: LoginPage
  },
  {
    path: "/register",
    name: "Register",
    component: RegisterPage
  },
  {
    path: "/",
    name: "Home",
    component: HomePage
  }
]

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

export default router;

当我运行应用程序时,我只能看到空白页。先谢谢你了。

jc3wubiy

jc3wubiy1#

在构建时,Electron只使用哈希路由。您需要将createWebHistory()替换为createWebHashHistory()

相关问题