Electron-Vue 系列之页面路由配置

梅子酱~

已于 2022-05-31 09:45:18 修改

阅读量6.1k

点赞数 3

CC 4.0 BY-SA版权

文章标签： vue.js electron 前端

于 2022-05-20 08:51:51 首次发布

本文链接：https://blog.youkuaiyun.com/mm_0123456789/article/details/124466880

本文详细介绍了如何在Electron应用中使用loadURL加载本地文件和远程接口，并展示了Vue2和Vue3的路由配置示例。特别强调了配置文件中端口的一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Electron-Vue loadURL 路由配置

一、loadURL使用

win.loadURL(url[, options])
url：string
options(可选)

使用方式如下（示例）：

1、引用本地文件

win.loadURL("file://${__dirname}/index.html")
win.loadURL("app://./index.html")

2、引用接口路径

win.loadURL('http://localhost:8000/post', {
  postData: [{
    type: 'rawData',
    bytes: Buffer.from('hello=world')
  }],
  extraHeaders: 'Content-Type: application/x-www-form-urlencoded'
})

二、配置路由

1.vue2 示例

1、路由配置（示例）：

{
   path: '/',
   name: '/views/login',
   component: () => import('../views/login.vue'),
},

2、定义 winURL

const winURL = process.env.NODE_ENV === 'development'
? `http://localhost:9080`
: `file://${__dirname}/index.html`

3、新建窗口，引入路由

newWindow.loadURL(winURL+'#/views/login');

2. vue3 示例

1、配置路由

{
  path: '/login',
  component: () => import('@/views/login'),
  hidden: true
},

2、定义winURL

const winURL = process.env.NODE_ENV === 'development'
  ? `http://localhost:18880` // 端口号根据个人项目进行更改
  : `app://./index.html`

3、新建窗口引用路由

newWindow.loadURL(winURL+ "/views/login")

三、注意

配置文件中的端口需与路由中的端口保持一致，否则会出现无法打开页面的情况

const port = process.env.port || process.env.npm_config_port || 18880