我目前正在使用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;
当我运行应用程序时,我只能看到空白页。先谢谢你了。
1条答案
按热度按时间jc3wubiy1#
在构建时,Electron只使用哈希路由。您需要将
createWebHistory()
替换为createWebHashHistory()
。