electron-app

• Vue3 + ElementPlus + electron-vite + Electron

安装

$ npm install

启动

$ npm run dev

打包

# For windows
$ npm run build:win

# For macOS
$ npm run build:mac

# For Linux
$ npm run build:linux

项目目录结构

├── build                    // 编译过程输出文件目录
├── dist                    // 打包后输出目录
├── node_modules            // 依赖模块
├── out                     //编译过程输出文件目录
├── resources                // 公共资源文件，主进程使用
│       └── icon.png         //默认图标
├──src                     
│   ├── main               // 主进程开发目录
│   │  └── index.js       //主进程入口文件      
│   ├── preload           // 预加载脚本开发目录
│   │   └── index.js        // 预加载默认脚本
│   └── renderer          // 渲染进程开发目录，类似纯web项目根目录
│              ├── src
│              │    ├── assets  //资源文件目录
│              │    ├── components  //组件目录
│              │    ├── App.vue        // 入口页面
│              │    └── main.js        // 入口文件
│              └── index.js.html        // 默认html文件
├── .editorconfig                    
├── .eslintignore                //eslint代码检查忽略配置文件
├── .eslintrc.cjs                 //eslint代码检查配置文件
├── .gitignore                   //git忽略配置文件
├── .npmrc                       // npm源配置文件
├── .prettierignore               //prettier代码格式化忽略配置文件
├── .prettierrc.yaml              //prettier代码格式化配置文件
├── dev-app-update.yml           
├── electron-builder.yml           //打包配置文件
├── electron.vite.config.mjs       //electron-vite配置文件
├── package-lock.json     
├── package.json              
└── README.md            //项目说明

electron-builder.yml配置说明

appId: com.electron.test //appid 包名
productName: 测试程序 //安装程序的名字
directories:
  buildResources: build
files:
  - '!**/.vscode/*'
  - '!src/*'
  - '!electron.vite.config.{js,ts,mjs,cjs}'
  - '!{.eslintignore,.eslintrc.cjs,.prettierignore,.prettierrc.yaml,dev-app-update.yml,CHANGELOG.md,README.md}'
  - '!{.env,.env.*,.npmrc,pnpm-lock.yaml}'
  - '!{tsconfig.json,tsconfig.node.json,tsconfig.web.json}'
asarUnpack:
  - resources
win:
  executableName: 测试程序 
  icon: build/icon/favicon.ico //程序图标
nsis:
  oneClick: false //是否一键安装 
  allowElevation: true //允许请求提升。若为false，则用户必须使用提升的权限重新启动安装程序。
  allowToChangeInstallationDirectory: true //是否允许修改安装目录
  createDesktopShortcut: true //卸载时图标
  createStartMenuShortcut: true // 是否创建开始菜单图标
  runAfterFinish: false //是否安装完成后运行
  include: ../build/script/installer.nsh //我这里放的是将应用程序默认安装在哪个路径
  artifactName: ${name}-${version}-setup.${ext}
  uninstallDisplayName: ${productName}
  installerIcon: ./build/icon.ico // 安装时图标
  uninstallerIcon: ./build/icon.ico
mac:
  entitlementsInherit: build/entitlements.mac.plist
  extendInfo:
    - NSCameraUsageDescription: Application requests access to the device's camera.
    - NSMicrophoneUsageDescription: Application requests access to the device's microphone.
    - NSDocumentsFolderUsageDescription: Application requests access to the user's Documents folder.
    - NSDownloadsFolderUsageDescription: Application requests access to the user's Downloads folder.
  notarize: false
dmg:
  artifactName: ${name}-${version}.${ext}
linux:
  target:
    - AppImage
    - snap
    - deb
  maintainer: electronjs.org
  category: Utility
appImage:
  artifactName: ${name}-${version}.${ext}
npmRebuild: false
publish:
  provider: generic
  url: https://example.com/auto-updates //程序升级的验证地址
electronDownload:
  mirror: https://npmmirror.com/mirrors/electron/