vue打包桌面程序

你的名字 2022-12-19 03:51 202阅读 0赞

1.创建项目

vue create electron-vue-start

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NDMwNTYz_size_16_color_FFFFFF_t_70_pic_center]

2.安装electron-builder

vue add electron-builder

会报错：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NDMwNTYz_size_16_color_FFFFFF_t_70_pic_center 1]

解决方案：

cnpm install --loglevel error

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NDMwNTYz_size_16_color_FFFFFF_t_70_pic_center 2]

3.运行看效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NDMwNTYz_size_16_color_FFFFFF_t_70_pic_center 3]

4、在项目根目录下添加vue.config.js配置文件，打包配置如下

module.exports = { 
      //打包为应用程序配置
      pluginOptions: { 
        // vue-cli-plugin-electron-builder 配置
        electronBuilder: { 
          builderOptions: { 
            // 设置打包之后的应用名称
            productName: 'HuaXin_Mall',
            win: { 
              icon: 'public/huaxin.ico',
              // 图标路径 windows系统中icon需要256*256的ico格式图片，更换应用图标亦在此处
              target: [{ 
                // 打包成一个独立的 exe 安装程序
                target: 'nsis',
                // 这个意思是打出来32 bit + 64 bit的包，但是要注意：这样打包出来的安装包体积比较大
                arch: [
                  'x64'
                  // 'ia32'
                ]
              }]
            },
            dmg: { 
              contents: [
                { 
                  x: 410,
                  y: 150,
                  type: 'link',
                  path: '/Applications'
                },
                { 
                  x: 130,
                  y: 150,
                  type: 'file'
                }
              ]
            },
            linux: { 
              // 设置linux的图标
              icon: 'public/huaxin.ico',
              target: 'AppImage'
            },
            mac: { 
              icon: 'public/huaxin.ico'
            },
            files: ['**/*'],
            extraResources: { 
              // 拷贝dll等静态文件到指定位置,否则打包之后回出现找不大dll的问题
              from: 'resources/',
              to: './'
            },
            asar: false,
            nsis: { 
              // 是否一键安装，建议为 false，可以让用户点击下一步、下一步、下一步的形式安装程序，如果为true，当用户双击构建好的程序，自动安装程序并打开，即：一键安装（one-click installer）
              oneClick: false,
              // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
              allowElevation: true,
              // 允许修改安装目录，建议为 true，是否允许用户改变安装目录，默认是不允许
              allowToChangeInstallationDirectory: true,
              // 安装图标
              installerIcon: 'public/huaxin.ico',
              // 卸载图标
              uninstallerIcon: 'public/huaxin.ico',
              // 安装时头部图标
              installerHeaderIcon: 'public/huaxin.ico',
              // 创建桌面图标
              createDesktopShortcut: true,
              // 创建开始菜单图标
              createStartMenuShortcut: true
            }
          },
          chainWebpackMainProcess: config => { 
            config.plugin('define').tap(args => { 
              args[0].IS_ELECTRON = true
              return args
            })
          },
          chainWebpackRendererProcess: config => { 
            config.plugin('define').tap(args => { 
              args[0].IS_ELECTRON = true
              return args
            })
          }
        }
      }
    };

5、执行打包命令

npm run electron:build

**如果执行失败：  
在电脑的配置环境里面加上  
变量名：ELECTRON\_MIRROR  
变量值：https://cdn.npm.taobao.org/dist/electron/**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NDMwNTYz_size_16_color_FFFFFF_t_70_pic_center 4]

--------------------

6、执行成功后目录如下（打包过程中出现错误，可再执行一遍）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NDMwNTYz_size_16_color_FFFFFF_t_70_pic_center 5]  
7、也可以自行编写Electron的功能，主进程文件在src下的background.js  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NDMwNTYz_size_16_color_FFFFFF_t_70_pic_center 6]  
8、如果想让打包的应用程序不显示菜单栏  
（1）引入Menu模块  
![在这里插入图片描述][20201105115255598.png_pic_center]  
（2）在createWindow方法里  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NDMwNTYz_size_16_color_FFFFFF_t_70_pic_center 7]  
9、打包成功后应用程序示例  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NDMwNTYz_size_16_color_FFFFFF_t_70_pic_center 8]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NDMwNTYz_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/98d354cbabb34d12888771c2c7b08f26.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NDMwNTYz_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201105114859317.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NDMwNTYz,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NDMwNTYz_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20201105114944659.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NDMwNTYz,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NDMwNTYz_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/20201105115010984.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NDMwNTYz,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NDMwNTYz_size_16_color_FFFFFF_t_70_pic_center 4]: https://img-blog.csdnimg.cn/20201105155415116.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NDMwNTYz,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NDMwNTYz_size_16_color_FFFFFF_t_70_pic_center 5]: https://img-blog.csdnimg.cn/20201105115221859.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NDMwNTYz,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NDMwNTYz_size_16_color_FFFFFF_t_70_pic_center 6]: https://img-blog.csdnimg.cn/20201105115241543.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NDMwNTYz,size_16,color_FFFFFF,t_70#pic_center
[20201105115255598.png_pic_center]: https://img-blog.csdnimg.cn/20201105115255598.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NDMwNTYz_size_16_color_FFFFFF_t_70_pic_center 7]: https://img-blog.csdnimg.cn/20201105115306355.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NDMwNTYz,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NDMwNTYz_size_16_color_FFFFFF_t_70_pic_center 8]: https://img-blog.csdnimg.cn/20201105115321759.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NDMwNTYz,size_16,color_FFFFFF,t_70#pic_center