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

原创

已于 2024-02-13 23:50:29 修改 · 933 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#electron #vue.js #npm

于 2023-03-21 17:49:24 首次发布

本文介绍了如何使用Electron-Vue创建一个Vue3项目，包括设置electron-builder、修改npmrc文件以加速下载、配置窗口信息、处理路由以及使用ipcMain和ipcRenderer来实现多窗口通信。同时，提到了打包过程和可能遇到的问题，如项目路径不能含中文，以及在不同操作系统下生成相应安装包的方法。

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

vue create vue-electron

2、添加electron

vue add  electron-builder

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

vi ~/.npmrc

添加：

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

看一下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) {