在 Electron 中加载 Vue Router 的指定路由1. 主进程 (main.js)在 Electron 主进程中正确加载 Vue Router 路由,支持开发与生产环境:const { app, BrowserWindow } = require('electron'); const path = require('path'); const isDev = process.env.NODE_ENV === 'development'; function createWindow() { const mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, 'preload.js'), contextIsolation: true, enableRemoteModule: false, }, }); const loadMainWindow = async () => { try { if (isDev) { await mainWindow.loadURL('http://localhost:8080/#/your-route'); } else { await mainWindow.loadFile(path.resolve(__dirname, 'dist', 'index.html'), { hash: '#/your-route', }); } } catch (error) { console.error('Failed to load the window:', error); app.quit(); } }; loadMainWindow(); mainWindow.on('closed', () => { mainWindow = null; }); } app.on('ready', createWindow);2. Vue Router 配置 (router/index.js)保证Vue Router 在 Electron 环境中正确运行,使用 createWebHashHistory 避免路径解析问题:import { createRouter, createWebHashHistory } from 'vue-router'; const routes = [ { path: '/', component: () => import('../components/Home.vue') }, { path: '/your-route', component: () => import('../components/YourComponent.vue') }, ]; const router = createRouter({ history: createWebHashHistory(), routes, }); // 添加导航守卫,防止未授权访问 router.beforeEach((to, from, next) => { console.log(`Navigating to: ${to.path}`); next(); }); export default router;3. Vue 根组件 (App.vue)Vue 应用的入口,作为路由视图的容器:<!-- App.vue --> <template> <router-view></router-view> </template> <script> export default { name: 'App' }; </script>4. Vue 组件中的导航 (components/ExampleComponent.vue)在 Vue 组件中使用 声明式导航 (router-link) 和 程序化导航 (router.push):<!-- ExampleComponent.vue --> <template> <div> <router-link to="/your-route" active-class="active">Go to Your Route</router-link> <button @click="navigateToRoute">Navigate Programmatically</button> </div> </template> <script> import { useRouter } from 'vue-router'; export default { setup() { const router = useRouter(); function navigateToRoute() { router.push('/your-route'); } return { navigateToRoute }; } }; </script> <style scoped> .active { font-weight: bold; color: blue; } </style>5. Preload 脚本 (preload.js)在 Electron 中使用 contextBridge 进行安全的数据通信:const { contextBridge, ipcRenderer } = require('electron'); contextBridge.exposeInMainWorld('electronAPI', { sendMessage: (channel, data) => { ipcRenderer.send(channel, data); }, }); 使用说明开发环境🔹 运行 npm run dev 启动前端开发服务器(监听 http://localhost:8080)。 🔹 设置 NODE_ENV=development。生产环境🔹 确定好已打包前端代码(dist 目录)。 🔹 使用 electron-builder 打包 Electron 应用。运行🔹 运行 electron . 启动应用,自动加载 #/your-route 路由。 🔹 通过 按钮 或 链接 触发导航。
1. 主进程 (
main.js
)在 Electron 主进程中正确加载 Vue Router 路由,支持开发与生产环境:
2. Vue Router 配置 (
router/index.js
)保证Vue Router 在 Electron 环境中正确运行,使用
createWebHashHistory
避免路径解析问题:3. Vue 根组件 (
App.vue
)Vue 应用的入口,作为路由视图的容器:
4. Vue 组件中的导航 (
components/ExampleComponent.vue
)在 Vue 组件中使用 声明式导航 (
router-link
) 和 程序化导航 (router.push
):5. Preload 脚本 (
preload.js
)在 Electron 中使用
contextBridge
进行安全的数据通信:开发环境
🔹 运行
npm run dev
启动前端开发服务器(监听http://localhost:8080
)。🔹 设置
NODE_ENV=development
。生产环境
🔹 确定好已打包前端代码(
dist
目录)。🔹 使用
electron-builder
打包 Electron 应用。运行
🔹 运行
electron .
启动应用,自动加载#/your-route
路由。🔹 通过 按钮 或 链接 触发导航。