Electron+vue3+vue-router搭建跨平台桌面应用程序_electron vue-router

electron-vue
vue3
electron快速入门
1、创建vue项目

vue create vue-electron
1

2、添加electron

vue add  electron-builder
1

可能会卡顿或者下载不了，改变一下electron的镜源

vi ~/.npmrc
1

添加：

electron_mirror=https://npm.taobao.org/mirrors/electron/
1

看一下package.json

新建background.js文件，package.json中配置。

background.js中配置窗口的基本信息

import { app, protocol, BrowserWindow } from 'electron'
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
const isDevelopment = process.env.NODE_ENV !== 'production'
protocol.registerSchemesAsPrivileged([
  { scheme: 'app', privileges: { secure: true, standard: true } }
])

async function createWindow() {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
      enableRemoteModule: true,
    }
  })
  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    if (isDevelopment) {
      win.webContents.openDevTools()
    }
  } else {
    createProtocol('app')
    win.loadURL('app://./index.html')
  }
}

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) createWindow()
})

app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
  }
  createWindow()
})
if (isDevelopment) {
  if (process.platform === 'win32') {
    process.on('message', (data) => {
      if (data === 'graceful-exit') {
        app.quit()
      }
    })
  } else {
    process.on('SIGTERM', () => {
      app.quit()
    })
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

//打包
 npm run electron:build
1
2

//调试/开发
 npm run electron:serve
1
2

//用于在安装应用程序依赖时执行 electron-builder install-app-deps 命令，以确保安装的依赖包含必要的二进制文件
 npm run postinstall
1
2

npm run electron:build会自动识别当前的操作系统，打出系统对应的安装包。 这也意味着，如果要生成exe\msi，需要在Windows操作系统，如果是dmg，则需要在Mac操作系统。

npm run electron:build 打包失败
1、项目路径中不能包含中文！！！！
2、先npm run build 再npm run electron:build

3、添加路由vue-router

npm install vue-router
1

新建router/index.js文件
1、使用createWebHashHistory，为什么呢？因为使用createWebHistory打包后跳转的路由空白。没研究出来为啥，有知道的可评论一下告诉我，感谢～

import { createRouter, createWebHashHistory } from 'vue-router'
const routes = [
  {
    path: '/homePage',
    name: "homePage",
    meta: {
      title: "首页"
    },
    component: () => import('@/views/homePage.vue')
  },
  { path: '/', redirect: '/homePage' },
  { path: '/:pathMatch(.*)', 
  component: () => import('@/views/homePage.vue')
  },
  {
    path: '/mdProtocol',
    meta: {
      title: "订阅合约"
    },
    name: 'mdProtocol',
    component: () => import('@/views/mdProtocol.vue')
  },
]

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

router.beforeEach((to, form, next) => {
  if (to.meta.title) {
    document.title = to.meta.title
  }
  next()
})

export default router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

2、设置路由中的tittle，这是窗口的自定义标题，如果不使用路由，那使用

win.setTitle('标题')
1

3、main.js 中引入router

import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router/index'
createApp(App).use(router).mount('#app')
1
2
3
4

4、app.vue中

4、打开多个窗口
使用ipcMain监听和ipcRenderer通知
在background.js文件中添加ipcMain。因为路由使用的hash模式，所以要注意win.loadURL中的要加上#哦，如下：

win.loadURL(winURL + '#' + data.filePath)
1

所有的代码如下：

import { app, protocol, BrowserWindow, ipcMain } from 'electron'
const isDevelopment = process.env.NODE_ENV !== 'production'
const winURL = isDevelopment ? process.env.WEBPACK_DEV_SERVER_URL : `file://${__dirname}/index.html/`
ipcMain.on('create-window', (e, data) => {
  console.log('file', data.filePath)
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
      enableRemoteModule: true,
      // webSecurity: false
    },
  })
  
  win.loadURL(winURL + '#' + data.filePath)
  if (!process.env.IS_TEST) win.webContents.openDevTools()
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在需要打开多窗口多页面使用ipcRenderer

<script setup>
const { ipcRenderer } = require('electron')
function openWin() {
  ipcRenderer.send('create-window', { filePath: "mdProtocol" })
}
function openWin2() {
  ipcRenderer.send('create-window', { filePath: "tdProtocol" })
}
</script>
1
2
3
4
5
6
7
8
9

效果如下：