Vue3+Vite+Electron开发桌端跨端应用

郑州小张
1,439 阅读2分钟

Vue开发桌端应用

Electron

Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台的桌面应用程序。它基于 Node.js 和 Chromium，被 Atom 编辑器和许多其他应用程序使用。

Electron 兼容 Mac、Windows 和 Linux，可以构建出三个平台的应用程序。

image.png

创建一个全新Vue3项目

npm init vue@latest

image.png

安装electron插件

npm install electron -D
npm install vite-plugin-electron -D

根目录创建electron文件夹

electron/index.ts


//app 控制应用程序的事件生命周期。
//BrowserWindow 创建并控制浏览器窗口。
import { app, BrowserWindow } from 'electron'
import path from 'path'

//定义全局变量获取 窗口实例
let win: BrowserWindow | null

const createWindow = () => {
  win = new BrowserWindow({
    // 是否隐藏菜单，默认 false
    autoHideMenuBar: true,
    //允许html页面上的javascipt代码访问nodejs 环境api代码的能力（与node集成的意思）
    webPreferences: {
      devTools: true,
      nodeIntegration: true,
      contextIsolation:true,
      preload: path.join(__dirname, './preload.js')  
    }
  })
  win.loadFile(path.join(__dirname, '../dist/index.html'))
  win.loadURL(`${process.env['VITE_DEV_SERVER_URL']}`)

  // 打开开发者工具
  win.webContents.openDevTools()
}

//在Electron完成初始化时被触发
app.whenReady().then(createWindow)

预加载脚本

npm install vite-plugin-electron-renderer -D

electron/preload.ts

// preload.ts
// All the Node.js APIs are available in the preload process.
import { contextBridge } from 'electron'

contextBridge.exposeInMainWorld('electronApi', {
  versions: {
    node: process.versions.node,
    chrome: process.versions.chrome,
    electron: process.versions.electron
  }
})

package.json

{
  "name": "electron-demo",
  "version": "0.0.0",
  "private": true,
  "main": "dist-electron/index.js",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build  &&  electron-builder",
    "preview": "vite preview",
    "test:unit": "vitest",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "format": "prettier --write src/"
  },
  "dependencies": {
    "element-plus": "^2.3.3",
    "pinia": "^2.0.32",
    "vue": "^3.2.47",
    "vue-router": "^4.1.6"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.2.0",
    "@types/jsdom": "^21.1.0",
    "@types/node": "^18.14.2",
    "@vitejs/plugin-vue": "^4.0.0",
    "@vue/eslint-config-prettier": "^7.1.0",
    "@vue/eslint-config-typescript": "^11.0.2",
    "@vue/test-utils": "^2.3.0",
    "@vue/tsconfig": "^0.1.3",
    "electron": "^24.1.2",
    "electron-builder": "^23.6.0",
    "eslint": "^8.34.0",
    "eslint-plugin-vue": "^9.9.0",
    "jsdom": "^21.1.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.8.4",
    "typescript": "~4.8.4",
    "vite": "^4.1.4",
    "vite-plugin-electron": "^0.11.2",
    "vite-plugin-electron-renderer": "^0.14.1",
    "vitest": "^0.29.1",
    "vue-tsc": "^1.2.0"
  },
  "build": {
    "appId": "com.electron.desktop",
    "productName": "这是一个Demo",
    "asar": true,
    "copyright": "Copyright © 2022 electron",
    "directories": {
      "output": "release/"
    },
    "files": [
      "dist",
      "dist-electron"
    ],
    "mac": {
      "artifactName": "${productName}_${version}.${ext}",
      "target": [
        "dmg"
      ]
    },
    "win": {
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64"
          ]
        }
      ],
      "artifactName": "${productName}_${version}.${ext}"
    },
    "nsis": {
      "oneClick": false,
      "perMachine": false,
      "allowToChangeInstallationDirectory": true,
      "deleteAppDataOnUninstall": false
    },
    "publish": [
      {
        "provider": "generic",
        "url": "http://127.0.0.1:8080"
      }
    ],
    "releaseInfo": {
      "releaseNotes": "版本更新的具体内容"
    }
  }
}

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron'
import electronRender from 'vite-plugin-electron-renderer'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    electron({
      // 入口文件
      entry: [
        // 主进程
        'electron/index.ts',
        // 预加载
        'electron/preload.ts'
      ]
    }),
    electronRender()
  ]
})

此时 npm run dev

2.png

electron-builder 打包

npm i electron-builder -D

package.json

"build": "vue-tsc --noEmit && vite build  &&  electron-builder"

image.png

  "build": {
    "appId": "com.electron.desktop",
    "productName": "electron",
    "asar": true,
    "copyright": "Copyright © 2022 electron",
    "directories": {
      "output": "release/"
    },    
    "files": [
      "dist",
      "dist-electron"
    ],
    "mac": {
      "artifactName": "${productName}_${version}.${ext}",
      "target": [
        "dmg"
      ]
    },
    "win": {
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64"
          ]
        }
      ],
      "artifactName": "${productName}_${version}.${ext}"
    },
    "nsis": {
      "oneClick": false,
      "perMachine": false,
      "allowToChangeInstallationDirectory": true,
      "deleteAppDataOnUninstall": false
    },
    "publish": [
      {
        "provider": "generic",
        "url": "http://127.0.0.1:8080"
      }
    ],
    "releaseInfo": {
      "releaseNotes": "版本更新的具体内容"
    }
  }



  // 构建选项
  build: {
    // 包名
    appId: 'com.electron.desktop',
    // 项目名 这也是生成的exe文件的前缀名
    productName: 'electron',
    // 是否 用 asar 压缩
    asar: true,
    //版权  信息
    copyright: 'Copyright © 2022 electron',
    directories: {
      // 输出文件夹
      output: 'release/'
    },
    // 被打包的文件
    // build 的 files 中要加dist和dist-electron，
    // dist 是 build vue文件的结果。
    // dist-electron 是 build electron下面的文件的结果。
    files: [
      'dist',
      'dist-electron'
    ],
    mac: {
      //图标路径
      icon: 'https://lmg.jj20.com/up/allimg/1114/050R1105319/21050Q05319-1-1200.jpg',
      artifactName: '${productName}_${version}.${ext}',
      // 我们要的目标安装包
      target: ['dmg']
    },
    // windows相关的配置
    win: {
      //图标路径
      icon: 'https://lmg.jj20.com/up/allimg/1114/050R1105319/21050Q05319-1-1200.jpg',
      // 我们要的目标安装包
      target: [
        {
          target: 'nsis',
          arch: ['x64']
        }
      ],
      artifactName: '${productName}_${version}.${ext}'
    },
    // 自定义一些.exe文件安装过程中的一些操作
    nsis: {
      // 代表是否显示辅助安装程序的安装模式安装程序页面（选择按机器还是按用户）。
      // true时代表始终按用户安装。
      perMachine: false,
      // 创建一键安装程序还是辅助安装程序（默认是一键安装）
      oneClick: false,
      // 是否允许请求提升，如果为false，则用户必须使用提升的权限重新启动安装程序 （仅作用于辅助安装程序）
      allowElevation: true,
      // 是否允许修改安装目录 （仅作用于辅助安装程序）
      allowToChangeInstallationDirectory: true,
      // 安装程序图标的路径
      installerIcon: 'public/timg.ico',
      // 卸载程序图标的路径
      uninstallerIcon: 'public/timg.ico',
      // 安装时头部图片路径（仅作用于辅助安装程序）
      installerHeader: 'public/timg.ico',
      // 安装时标题图标（进度条上方）的路径（仅作用于一键安装程序）
      installerHeaderIcon: 'public/timg.ico',
      // 安装完毕界面图片的路径，图片后缀.bmp，尺寸164*314 （仅作用于辅助安装程序）
      installerSidebar: 'public/installerSiddebar.bmp',
      // 开始卸载界面图片的路径，图片后缀.bmp，尺寸164*314 （仅作用于辅助安装程序）
      uninstallerSidebar: 'public/uninstallerSiddebar.bmp',
      // 控制面板中的卸载程序显示名称
      uninstallDisplayName: '${productName}${version}',
      // 是否创建桌面快捷方式
      createDesktopShortcut: true,
      // 是否创建开始菜单快捷方式
      createStartMenuShortcut: true,
      // 用于快捷方式的名称，默认为应用程序名称
      shortcutName: 'SHom',
      // NSIS包含定制安装程序脚本的路径，安装过程中自行调用  (可用于写入注册表 开机自启动等操作)
      include: 'script/installer.nsi',
      // 用于自定义安装程序的NSIS脚本的路径
      script: 'script/installer.nsi',
      // 是否在卸载时删除应用程序数据（仅作用于一键安装程序）
      deleteAppDataOnUninstall: false,
      // 完成后是否运行已安装的应用程序（对于辅助安装程序，应删除相应的复选框）
      runAfterFinish: true,
      // 是否为开始菜单快捷方式和程序文件目录创建子菜单，如果为true，则使用公司名称
      menuCategory: false
    },
    // 更新用的配置，主要是为了生成lastest.yaml配置文件
    publish: [
      {
       // 服务器提供商 也可以是GitHub等等
        provider: 'generic',
        // 服务器地址}
        url: 'http://127.0.0.1:6060'
      }
    ],
    releaseInfo: {
      releaseNotes: '版本更新的具体内容'
    }
  }

npm run build

build.png exe.png

image.png

双击安装之后

image.png

avatar
文章
阅读
粉丝