使用Electron将Vue项目打包成桌面应用

一、

Electronhttps://so.csdn.net/so/search?q=Electron&spm=1001.2101.3001.7020

1、Electron安装命令：

npm install electron g

2、Vue项目添加Electron-builder打包工具：

vue add electron-builder

PS：如果安装electron或者builder打包工具失败请设置国内镜像并且重新安装

3、设置国内镜像：

npm config edit

4、执行后会弹出npm的配置文档，将以下类容复制到文件末尾。

electron_mirror=https://npm.taobao.org/mirrors/electron/
 
electron-builder-binaries_mirror=https://npm.taobao.org/mirrors/electron-builder-binaries/

二、

npm run serve    网页运行
 
npm run electron:serve   网页运行并打开客户端运行
 
npm run electron:build   构建打包客户端-会在根目录生成dist_electron文件夹
                         其中的XXX Setup XXX.exe就是安装包
 

三、

1、修改logo图片配置打包信息：注意：是vue.config.js文件，不是package.js

我下面引入的图片里面有一个build/logo.ico的文件，这个文件大小必须是256*256的
然后这个build的目录在项目根目录下创建，图片放进去就行

module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? './' : '/', //判断开发模式还是生产模式
    pluginOptions: {
        electronBuilder: {
            builderOptions: {
                nsis: {
                  allowToChangeInstallationDirectory: true,
                  oneClick: false,
                  installerIcon: "./build/logo.ico",  //安装logo
                  installerHeaderIcon: "./build/logo.ico" //安装logo
                },
                electronDownload: {
                    mirror: "https://npm.taobao.org/mirrors/electron/" //镜像设置
                },
                win: {
                    icon: './build/logo.ico' //打包windows版本的logo
                },
                productName: "应用名称",  //应用的名称
            }
        }
    },
}

2、electron-builder的配置文件

build: {
          productName: "xxxx",      //项目名 这也是生成的exe文件的前缀名
          appId: "com.xxx.xxxxx",   //包名  
          copyright: "xxxx",            //版权信息
          directories: {            //输出文件夹
            output: "build-electron"
          },
          nsis: {   //nsis相关配置，打包方式为nsis时生效
            oneClick: false,                                // 是否一键安装
            allowElevation: true,                           // 允许请求提升，如果为false，则用户必须使用提升的权限重新启动安装程序。
            allowToChangeInstallationDirectory: true,       // 允许修改安装目录
            installerIcon: "./build/icons/aaa.ico",         // 安装图标
            uninstallerIcon: "./build/icons/bbb.ico",       //卸载图标
            installerHeaderIcon: "./build/icons/aaa.ico",   // 安装时头部图标
            createDesktopShortcut: true,                    // 创建桌面图标
            createStartMenuShortcut: true,                  // 创建开始菜单图标
            shortcutName: "xxxx",                           // 图标名称
            include: "build/script/installer.nsh",          // 包含的自定义nsis脚本
          },
          publish: [
            {
              provider: "generic",      // 服务器提供商，也可以是GitHub等等
              url: "http://xxxxx/"      // 服务器地址
            }
          ],
           electronDownload: {
                    mirror: "https://npm.taobao.org/mirrors/electron/"
                },
          win: {
            icon: "build/icons/aims.ico",
            target: [
              {
                target: "nsis",         //使用nsis打成安装包，"portable"打包成免安装版
                arch: [
                  "ia32",               //32位
                  "x64"                 //64位
                ]
              }
            ]
          },
          mac: {
            icon: "build/icons/icon.icns"
          },
          linux: {
            icon: "build/icons"
          }
        }

3、vue.config.js 配置示例：

module.exports = defineConfig({
    publicPath: process.env.NODE_ENV === 'production' ? './' : '/', //判断开发模式还是生产模式
    transpileDependencies: true,
    lintOnSave: false,
    pluginOptions: {
        electronBuilder: {
            builderOptions: {
                productName: '随意', // 生成 exe 的名字
                appId: "随意", // 包名  
                copyright: "随意", // 版权信息
                asar: false, // 文件不压缩成 app.asar
                directories: { // 输出文件夹
                    output: "electron_output",
                },
                nsis: {
                    oneClick: false, //是否一键安装
                    allowElevation: false, // 允许请求提升。若为false，则用户必须使用提升的权限重新启动安装程序
                    allowToChangeInstallationDirectory: true, //是否允许修改安装目录
                    installerIcon: "./build/icons/icon.ico", // 安装时图标
                    uninstallerIcon: "./build/icons/icon.ico", //卸载时图标
                    installerHeaderIcon: "./build/icons/icon.ico", // 安装时头部图标
                    createStartMenuShortcut: true, // 是否创建开始菜单图标
                    createDesktopShortcut: true, //是否创建桌面图标
                    shortcutName: "随意", // 快捷方式名称
                    runAfterFinish: false, //是否安装完成后运行
                },
                electronDownload: {
                    mirror: "https://npm.taobao.org/mirrors/electron/"
                },
                win: {
                    icon: 'build/icons/icon.ico',
                    target: [{
                        target: "nsis", //利用nsis制作安装程序
                        arch: [
                            "x64", //64位
                            // "ia32" //32位
                        ]
                    }]
                },
            }
        }
    },

​
})

四、

1、隐藏菜单栏目：根目录下src/background.js文件，找到app.on方法

app.on('ready', async () => {
    createWindow()
    // 隐藏菜单栏
    const {
        Menu
    } = require('electron');
    Menu.setApplicationMenu(null);
    // hide menu for Mac 
    if (process.platform !== 'darwin') {
        app.dock.hide();
    }
})

2、设定宽高也在这个文件里面

const win = new BrowserWindow({
        width: 1000,
        height: 800,
        title: '标题',
        webPreferences: {
            // Use pluginOptions.nodeIntegration, leave this alone
            // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
            nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
            contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION
        }
    })