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