正文 7660字数 20,234阅读


package.json
{ "name": "htafxt", "version": "8.3.229", "author": "海天 <2500152288@qq.com>", "description": "合规监测系统", "homepage": "http://lizhenqiu.com", "main": "main.js", "scripts": { "start": "electron . --arg1 development", "build": "electron-builder --linux" }, "build": { "productName": "合规监测系统", "appId": "org.simulatedgreg.electron-vue", "copyright": "合规监测系统", "directories": { "output": "build" }, "publish": [ { "provider": "generic", "url": "http://192.168.1.80:181" } ], "files": [ "../dist", "alg.jpg", "anflogo.png", "preload.js", "main.js" ], "linux": { "category": "Office", "icon": "anflogo256.png", "target": [ "deb" ] }, "nsis": { "oneClick": false, "allowElevation": true, "allowToChangeInstallationDirectory": true, "installerIcon": "Gxht256.ico", "uninstallerIcon": "Gxht256.ico", "installerHeaderIcon": "Gxht256.ico", "createDesktopShortcut": true, "createStartMenuShortcut": true, "shortcutName": "合规监测系统" } }, "dependencies": { "electron-dl": "^3.5.0", "electron-log": "^4.4.8", "electron-reload": "^2.0.0-alpha.1", "electron-updater": "^6.1.1", "node-machine-id": "^1.1.12" }, "devDependencies": { "electron": "^21.4.4", "electron-builder": "^25.1.8", "electron-dl": "^3.5.0", "electron-log": "^4.4.8", "electron-reload": "^2.0.0-alpha.1", "electron-updater": "^6.1.1", "node-machine-id": "^1.1.12" } }
Run code
Cut to clipboard


    容器内编译命令
    cd Linux && npm run build
    Run code
    Cut to clipboard


      打包windows包的配置
      Vue cli 3.x使用electron打包配置

      1. 修改package.json配置，下面三个字段必填，且author要按照下面格式填写
      { "license": "aaa", // 根据实际情况填写 "author": "作者名 <邮箱地址>", // 如 "张三 <1111@qq.com>" "homepage": "", // 可以填写网址，如公司官网网址或者app对应网页的地址等 }
      Run code
      Cut to clipboard


        scripts中添加electron打包linux环境的命令
        "scripts": { // 可选 --x64 --ia32 --arm64 --armv7l等 "electron:linux": "vue-cli-service electron:build -l --x64", // 打包linux下amd64位的包 "electron:arm": "vue-cli-service electron:build -l --arm64" // 打包linux下arm64位的包 },
        Run code
        Cut to clipboard


          2. 在vue.config.js中的electron-builder的配置下增加linux的配置，linux下默认打的是AppImage包和snap包，可以通过target字段修改
          pluginOptions: { electronBuilder: { builderOptions: { ... linux: { icon: './public/app.png', // 注意linux下图片的尺寸最好是256*256 // target: 'deb', // 这个字段也可以是数组格式，具体可以参考electron-builder官网 }, ... } } }
          Run code
          Cut to clipboard


            3. 以前是可以直接在windows下打linux包的，但是现在根据官方文档说明，原来支持打包的服务已经停用了，所以windows下我们需要借助虚拟机来实现打包（条件允许的打包什么样的版本的包可以直接在对应的linux系统上进行打包）

            打包步骤：
            安装docker Docker下载地址
            安装后启动 docker desktop，可能会报错提示需要更新到WSL2，安装过程中会出现失败等情况，可以参考 Win10家庭版 通过Hyper-V（WSL2）安装Docker-Desktop 失败
            启动成功后，win + r 输入cmd打开终端

            输入
            docker pull electronuserland/builder
            Run code
            Cut to clipboard

              输入
              docker run --rm -ti -v C:\project\vue\:/project -w /project electronuserland/builder
              Run code
              Cut to clipboard


                这行命令表示把windows系统下的项目映射到虚拟机的某个虚拟文件夹下
                (其中C:\project\vue\ 为要映射的原项目文件地址，最后一个斜杠不要忘哦！！ 其中的两个/project表示映射后项目所放置的文件夹名称，可以根据自己的习惯进行修改)

                映射成功，进入linux命令行后，重新装包
                npm install
                Run code
                Cut to clipboard

                  装包过程中可能会出现安装electron包很慢的情况，可以修改npm、electron、electron-builder-binaries的安装镜像源
                  修改npm的下载镜像为淘宝镜像
                  npm config set registry https://registry.npm.taobao.org
                  Run code
                  Cut to clipboard


                    按照下面命令修改electron镜像，electron-builder-binaries是后面打包过程中需要用到的，可以提前修改镜像
                    npm config set electron_mirror https://npm.taobao.org/mirrors/electron/ npm config set electron-builder-binaries_mirror_mirror https://npm.taobao.org/mirrors/electron-builder-binaries_mirror/
                    Run code
                    Cut to clipboard


                      electron的某些版本在淘宝镜像中可能找不到，也可以用华为云这个镜像安装
                      npm config set electron_mirror https://mirrors.huaweicloud.com/electron/ npm config set electron-builder-binaries_mirror https://mirrors.huaweicloud.com/electron-builder-binaries/
                      Run code
                      Cut to clipboard


                        装包成功后，执行打包命令时，可能报错需要npm rebuid node-sass，按照报错提示执行npm rebuid node-sass即可
                        执行完毕后，继续打包，打包完成后dist-electron则会出现对应的安装包

                        4. 安装包的升级，electron官网中有提过autoUpdater是不支持linux的自动升级的，需要通过发行版包管理器来实现升级
                        因为我们做的是政府项目，所以发行版包管理器不好搭建
                        自动升级检测时，amd下需要latest-linux.yml配置文件，arm下需要latest-linux-arm64.yml（根据系统实际的位数变化）配置文件

                        打包deb安装包时，即使配置了publish，无法打包出latest-linux.yml文件
                        在不修改linux下的target配置时，打包amd64的包时，默认情况下会同时打包AppImage和snap两种格式的包，并且会产生latest-linux.yml文件，并且按照windows的自动更新方式上传新的latest-linux.yml和安装包到服务器，通过autoUpdater是可以实现自动检测更新的

                        打包arm64的包时，在打包snap包时会报错，提示需要sudo snap install snapcraft --classic 但是安装这个很难成功（目前我还没成功，即使我在arm64的虚拟系统上打包也会有这个报错），当然这个报错不会影响AppImage打包，在dist-electron中可以看到AppImage包，但是这个报错会让我们得不到latest-linux-arm64文件，所以建议大家这个时候可以修改下target："AppImage"后即可成功打包出latest-linux-arm64文件了，同样也可以使用autoUpdater进行更新了

                        针对无法使用自动升级的deb包，我采用的是当有新的安装包时，提示用户去下载安装更新，在系统中提供下载最新安装包的位置，让用户手动进行下载安装更新

                        5.打包出来的AppImage安装包在实际安装过程中会出现问题
                        amd下安装AppImage包运行时报错
                        /tmp/.mount_综合tnTpHu/chrome-sandbox is owned by root and has mode 4755.
                        Run code
                        Cut to clipboard


                          解决方案：
                          1、终端运行时添加免沙箱命令–no-sandbox，但是该种方案在自动升级时会无法自动打开应用程序，只能将AppImage旧版本安装包所在的路径下的安装包替换为新版本的安装包，然后重新通过命令行的方式打开
                          2、启用用户命名空间：sudo sysctl kernel.unprivileged_userns_clone=1，但每次开机都要运行该命令
                          3、给报错信息中的文件授权：sudo chown root <path_to_marktext_dir>/chrome-sandbox && sudo chmod 4755 <path_to_marktext_dir>/chrome-sandbox，这个方法不适用于picgo，因为这个chrome-sandbox文件会被自动删除，（我不太清楚electron打包出来的是不是picgo，但是我确实没有找到这个路径下的sandbox文件）
                          4、开机时自启动用户名称空间：root下运行echo ‘kernel.unprivileged_userns_clone=1’ >
                          /etc/sysctl.d/userns.conf命令即可

                          arm下安装的时候报错
                          error while loading shared libraries: libz.so: cannot open shared object file: No such file or directory.
                          Run code
                          Cut to clipboard


                            解决方案：

                            使用apt-file search查找
                            sudo apt-get install apt-file
                            安装成功使用apt-file时一般会提示更新
                            sudo apt-file update
                            查找libz.so所在的库或所在的包
                            apt-file search libz.so
                            运行命令显示如下：
                            libzadc-dev: /usr/lib/arrch64-linux-gnu/genwqe/libz.so zlib1g-dev: /usr/lib/arrch64-linux-gnu/libz.so ...
                            Run code
                            Cut to clipboard


                              右边是匹配你缺失的库的，左边是查到的库所在的包，当发现匹配到多个包时，按顺序安装尝试即可（我安装了第一个就可以了）

                              安装缺失包：
                              sudo apt-get install libzadc-dev
                              可以正常运行包
                              最后给大家提些小小的帮助，因为对linux不是很熟悉而浪费时间的地方（当然大佬可以无视）
                              linux下安装deb包成功，但是点击打开运行时毫无反应，由于本人不知道怎么查看运行终端查看报错日志，于是反复打包了很多次依然无果，

                              查看方式，打开deb安装包安装成功后的文件夹，下面有一个跟你打包时在package.json中的写的name同名的可执行程序，在当前文件夹下打开终端，拖动该可执行程序到终端中运行，即可以查看到运行日志
                              运行时报错cannot find module fs/promise 这种错误是因为包的版本不对，我把electron-updater的版本固定到4.3.5就可以成功运行了