vue项目打包为桌面应用程序

悠悠 2022-12-19 01:21 217阅读 0赞

转载：[vue项目打包为桌面应用程序][vue]

**1、通过Vue-cli创建vue 项目**

vue create electron-vue-start
    
       
        
       
        
         1

**2、Vue项目下，命令行执行**

vue add electron-builder
    
       
        
       
        
         1

注意：执行过程中可能会出现错误，如果出现错误，他会提示哪条命令没有执行成功，推荐用cnpm（淘宝镜像）执行那条失败的命令

**3、执行命令查看是否能运行项目**

npm run electron:serve 
    
       
        
       
        
         1

**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
            })
          }
        }
      }
    };

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10
 *  11
 *  12
 *  13
 *  14
 *  15
 *  16
 *  17
 *  18
 *  19
 *  20
 *  21
 *  22
 *  23
 *  24
 *  25
 *  26
 *  27
 *  28
 *  29
 *  30
 *  31
 *  32
 *  33
 *  34
 *  35
 *  36
 *  37
 *  38
 *  39
 *  40
 *  41
 *  42
 *  43
 *  44
 *  45
 *  46
 *  47
 *  48
 *  49
 *  50
 *  51
 *  52
 *  53
 *  54
 *  55
 *  56
 *  57
 *  58
 *  59
 *  60
 *  61
 *  62
 *  63
 *  64
 *  65
 *  66
 *  67
 *  68
 *  69
 *  70
 *  71
 *  72
 *  73
 *  74
 *  75
 *  76
 *  77
 *  78
 *  79
 *  80
 *  81
 *  82
 *  83
 *  84
 *  85
 *  86

**5、执行打包命令**

npm run electron:build
    
     
      
     
      
       1

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

[vue]: https://blog.csdn.net/weixin_44790046/article/details/106248717?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160453707319725255531597%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=160453707319725255531597&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_v2~rank_v28-2-106248717.pc_first_rank_v2_rank_v28&utm_term=vue3%E6%89%93%E5%8C%85%E6%A1%8C%E9%9D%A2&spm=1018.2118.3001.4449
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5MDA0Ng_size_16_color_FFFFFF_t_70]: /images/20221120/50c1568a080a499fa73fc5b2c72c624b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5MDA0Ng_size_16_color_FFFFFF_t_70 1]: /images/20221120/a9ea398ab20540da98b3c4ed01c54212.png
[20200521084027666.png]: /images/20221120/f0acb9863cec48b5afcfd0ccf1055e00.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5MDA0Ng_size_16_color_FFFFFF_t_70 2]: /images/20221120/dba2f4d2b51149a1982bf8a29b815673.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5MDA0Ng_size_16_color_FFFFFF_t_70 3]: /images/20221120/23f204d50e3444639ad8be9b514b4c7c.png