electron vue3 发布应用程序

​

Electron+Vue应用生成安装包

​

1. 基础环境

序号	名称	版本号	说明
1	electron	33.3.2	版本号一定要固定，特别是在使用了一些对版本有要求的插件时，版本号不固定，默认重新install时会安装大版本号下的最新版本
2	nodejs	20.12.0	nodejs.org/download/re…
3	vue/cli	5.0.8

由于国内npm下载非常慢，建议安装cnpm或pnpm，以下是cnpm安装方法

 npm install -g cnpm -registry=https://registry.npmmirror.com 

2. 基础配置

2.1 package.json配置参考

{
  "name": "dataanalysis",
  "version": "1.0.0",
  "private": true,
  "homepage": "http://www.xxx.net",//项目主页，此项不配置打包Linux安装包时可能报错
  "author": "xxx <example@example.com>",//作者，此项不配置打包Linux安装包时可能报错
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "electron:build": "vue-cli-service electron:build",
    "electron:serve": "vue-cli-service electron:serve",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps",
  },
  "main": "background.js",
  ...//其他省略
}
​

2.2 vue.config.js配置参考

const { defineConfig } = require('@vue/cli-service')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
}
module.exports = defineConfig({
  lintOnSave: false,
  transpileDependencies: true,
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()]
      }),
      Components({
        resolvers: [ElementPlusResolver()]
      }),
      new NodePolyfillPlugin()
    ]
  },
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true,
      customFileProtocol: 'app://./', // 确保 Electron 的资源协议路径正确
      builderOptions: {
        asar: false, // 是否把app文件夹压缩成app.asar
        win: {
          icon: './public/logo_ico256.ico',//程序图标
          target: [
            {
              target: 'nsis', // 利用nsis制作安装程序
              arch: [
                // 'x64', // 64位
                'ia32' // 32位
              ]
            }
          ]
        },
        linux: {
          target: ['AppImage', 'deb', 'rpm'], // 可选打包目标（AppImage, deb, rpm, snap, 等）'deb', 'rpm','snap','tar.gz'
          category: 'Development', // 在Linux上安装后开始菜单中的分类，用户指定单个类别
          icon: 'public/icons',  // 设置图标路径
          maintainer: 'xxx <example@example.com>',//维护者，数据格式：姓名+邮箱[author <example@example.com>]
          desktop: {
            Name: 'DataAnalysis',//开始菜单中显示的应用名称
            'Name[zh_CN]':'日志分析',//开始菜单中显示的应用的中文名称，在中文操作系统中显示
            StartupNotify:false,//是否显示启动通知
            Icon: 'DataAnalysis',//图标，此处保持与应用名称一直，Linux安装时会默认复制上一层设置的图标路径下的图标文件到系统目录，并且命名为"应用名称.png"，系统会根据此处的名称去自动查找
            Comment: '此应用是...工具。',//应用的描述
            Type: 'Application',//类型设置
            Terminal: false,//是否在终端运行，设置false即为在图形界面运行
            Categories:'Development;Utility;'//在Linux上安装后开始菜单中的分类，可指定多个类别，常见分类如下：
                                            //Utility：实用工具，如文本编辑器、计算器等。
                                            //Development：开发工具，如编程环境、编译器等。
                                            //Graphics：图形和图片处理软件，如图像编辑器、查看器等。
                                            //Office：办公应用，如文字处理、电子表格等。
                                            //Education：教育软件，如学习工具、教学软件等。
                                            //Multimedia：多媒体应用，如音频播放器、视频播放器等。
                                            //Network：网络应用，如浏览器、邮件客户端等。
                                            //Games：游戏类应用。
                                            //System：系统管理工具，如终端、文件管理器等。
          },
          executableName: "DataAnalysis"//可执行文件名称，替代desktop下的Exec配置
        },
        deb: {
          afterInstall: "./public/extend/afterInstall.sh",//安装后执行的脚本，用于创建桌面快捷方式，以及相关文件授权
          afterRemove: "./public/extend/afterRemove.sh"//卸载后执行的脚本，删除桌面快捷方式
        },
        nsis: {
          oneClick: false,  // 是否一键安装   
          allowElevation: true, // 允许请求提升.如果为false，则用户必须使用提升的权限重新启动安装程序。
          perMachine: false,//true：为所有计算机用户安装，false:为当前用户安装
          allowToChangeInstallationDirectory: true, // 允许修改安装目录
          installerIcon: './public/logo_ico32.ico', // 安装图标
          uninstallerIcon: './public/logo_ico32.ico', // 卸载图标
          installerHeaderIcon: './public/logo_ico32.ico', // 安装时头部图标
          createDesktopShortcut: true, // 创建桌面图标
          createStartMenuShortcut: true, // 创建开始菜单图标
          shortcutName: 'DataAnalysis' // 桌面图标名称          
        },
        productName: 'DataAnalysis', // 包名
        appId: 'com.xxx.com.dataanalysis', // 项目id
        copyright: '最终解释权归xxx公司所有', // 版权信息      
        // directories: {
        //   output: './dists' // 输出文件路径
        // }
        //额外资源
        // extraResources: [
        //   {
        //     // from: 'node_modules/better-sqlite3/build/Release/better_sqlite3.node', // 指定 .node 文件路径
        //     // to: 'build/Release/better_sqlite3.node', // 指定输出位置
        //      from: 'src/assets/fonts',
        //      to: 'app/fonts'
        //   },
        // ],
        files: [
          '**/*', // 默认会包括 dist 文件夹内容
          '!node_modules/**/*.map', // 排除多余的调试文件
        ],
      },
    }
  },
  //// 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上,例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/
  // publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
  // // 当运行 vue-cli-service build 时生成的生产环境构建文件的目录。注意目标目录的内容在构建之前会被清除 (构建时传入 --no-clean 可关闭该行为)。
  // outputDir: 'dist',
  // // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
  // assetsDir: 'static',
  // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
  productionSourceMap: true,
  publicPath: './', // 确保资源路径为相对路径
​
  chainWebpack: config => {
    config.plugin('html').tap(args => {
      args[0].title = '日志数据分析';
      return args;
    });
    config.resolve.alias
      .set('@$', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components'))
      .set("assets", resolve("src/assets"))
      .set("components", resolve("src/components"))
      .set("network", resolve("src/network"))
      .set("views", resolve("src/views"));
  },
})
​

2.3 桌面快捷方式配置文件

文件名称为：应用名称.desktop

[Desktop Entry]
Encoding=UTF-8
Name=DataAnalysis
Name[zh_CN]=日志分析
Exec=/opt/DataAnalysis/DataAnalysis %U
Icon=DataAnalysis
StartupNotify=false
Comment=此应用是运维人员...。
Terminal=false
Type=Application
Categories=Development;Utility;

2.4 afterInstall.sh

#! /bin/sh
DesktopName=DataAnalysis.desktop
# desktop位置
DesktopPath=/opt/DataAnalysis/resources/app/extend/$DesktopName
# root桌面
RootDesktop=/root/Desktop
# 给root创建桌面图标
if [ -d $RootDesktop ]; then
  cp $DesktopPath $RootDesktop
fi
​
users=`users`
​
# 给所有用户增加图标
for u in $users
do
  # 中英文桌面
  DesktopDir=/home/$u/Desktop
  CnDesktopDir=/home/$u/桌面
​
  if [ -d $DesktopDir ]; then
    cp $DesktopPath $DesktopDir;
    chmod 777 $DesktopDir/$DesktopName;
  fi
​
  if [ -d $CnDesktopDir ]; then
    cp $DesktopPath $CnDesktopDir;
    chmod 777 $CnDesktopDir/$DesktopName
  fi
done
​
# 创建日志目录
DIRLogs='/opt/DataAnalysis/logs'
if [ ! -d "$DIRLogs" ]; then
    mkdir -p $DIRLogs
fi
​
# 设置权限
sudo chmod 777 $DIRLogs
​
# 设置 chrome-sandbox 的所有者为 root 并设置正确的权限
# 确保使用正确的路径到您的 chrome-sandbox 文件
chromeSandboxPath="/opt/DataAnalysis/chrome-sandbox"
​
# 检查 chrome-sandbox 文件是否存在
if [ -f "$chromeSandboxPath" ]; then
  # 更改所有者为 root
  sudo chown root:root "$chromeSandboxPath"
​
  # 设置权限为 4755
  sudo chmod 4755 "$chromeSandboxPath"
​
  echo "chrome-sandbox 权限和所有者已设置。"
else
  echo "警告：未找到 chrome-sandbox 文件：$chromeSandboxPath"
fi
​

2.5 afterRemove.sh

#! /bin/sh
#名称
DesktopName=DataAnalysis.desktop
# root桌面
RootDesktop=/root/Desktop/$DesktopName
# 给root创建桌面图标
if [ -f $RootDesktop ]; then
  rm $RootDesktop
fi
​
users=`users`
​
# 给所有用户增加图标
for u in $users
do
​
  DesktopDir=/home/$u/Desktop/$DesktopName
​
  CnDesktopDir=/home/$u/桌面/$DesktopName
​
  if [ -f $DesktopDir ]; then
    rm $DesktopDir
  fi
​
  if [ -d $CnDesktopDir ]; then
    rm $CnDesktopDir
  fi
done

3. Windows安装包

# 运行命令执行打包
cnpm run electron:build
# 注意，打包时可能electron会下载失败，如果下载失败，需要手动去GitHub下载对应版本的安装包，放到电脑缓存目录，
# 缓存目录一般为C:\Users\当前登录用户\AppData\Local\electron\Cache

4. Linux安装包

注意：

0. 打包Linux的图标文件是png或svg格式，支持多种尺寸，例如 （16x16, 32x32, 64x64, 128x128）,并以尺寸.png命名，放在固定目录，配置vue.config.js中指定所在目录即可
1. Windows环境下不能直接打包Linux安装包，需要在Linux操作系统下进行打包或者Windows下安装docker，在docker中打包

以下是在docker下打包过程，以供参考：

# 首先安装DockerDesktop，安装过程省略
# ...
#未启用虚拟化的电脑，需要进入BIOS开启虚拟化
​
#拉取基础镜像
docker pull electronuserland/builder:wine
​
#进入项目主目录，运行容器
cd 项目路径
#以下运行容器语句，需要映射自己的项目主目录，node_modules依赖目录，electron缓存目录，electron-builder缓存目录
docker run -v ${PWD}:/project -v ${PWD}/node_modules:/project/node_modules -v C:/Users/stevencao/AppData/Local/electron/Cache:/root/.cache/electron -v C:/Users/stevencao/AppData/Local/electron-builder/Cache:/root/.cache/electron-builder electronuserland/builder:wine bash
​
#进入容器后，安装以下插件
npm install -g cnpm -registry=https://registry.npmmirror.com
#删除node_modules，在容器中重新install
cnpm install
#生成安装包,执行以下语句，将会生成配置文件中指定的安装包格式。
cnpm run electron:build