前端vue项目打包成win和mac端 .exe文件的方法 用代码实现

Posted 箴水_Protaos

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端vue项目打包成win和mac端 .exe文件的方法 用代码实现相关的知识,希望对你有一定的参考价值。

要将Vue.js项目打包为Windows和macOS平台的可执行文件(.exe文件和.app文件),可以使用Electron框架。以下是实现该过程的代码示例:

  1. 首先,需要安装Electron依赖:
npm install electron --save-dev
  1. 接下来,创建一个Electron主进程的文件,例如main.js。这个文件将包含应用程序的主要逻辑,并且负责创建和控制Electron窗口。
const  app, BrowserWindow  = require('electron');
const path = require('path');

// 创建窗口
function createWindow() 
  const mainWindow = new BrowserWindow(
    width: 800,
    height: 600,
    webPreferences: 
      nodeIntegration: true
    
  );

  // 加载Vue.js应用程序
  mainWindow.loadURL(`file://$path.join(__dirname, 'index.html')`);


// 当应用程序准备就绪时创建窗口
app.whenReady().then(() => 
  createWindow();

  // 如果没有窗口,则退出
  app.on('activate', function () 
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  );
);

// 当所有窗口都关闭时退出应用程序
app.on('window-all-closed', function () 
  if (process.platform !== 'darwin') app.quit();
);

上述代码中,创建了一个窗口,并将Vue.js应用程序的入口页面index.html加载到窗口中。app.whenReady()函数会在Electron应用程序准备就绪后创建窗口,app.on('activate')函数会在没有窗口时重新创建窗口。app.on('window-all-closed')函数会在所有窗口都关闭时退出应用程序。

  1. 然后,在package.json文件中添加以下脚本:
"scripts": 
  "start": "electron .",
  "package-win": "electron-packager . my-app --platform=win32 --arch=x64 --out=dist --icon=icon.ico",
  "package-mac": "electron-packager . my-app --platform=darwin --arch=x64 --out=dist --icon=icon.icns"

这里添加了三个脚本,start用于启动Electron应用程序,package-win用于打包Windows平台的可执行文件,package-mac用于打包macOS平台的可执行文件。在electron-packager命令中,my-app表示应用程序的名称,--platform参数指定目标平台,--arch参数指定处理器架构,--out参数指定输出目录,--icon参数指定应用程序图标。

  1. 最后,运行以下命令打包应用程序:
npm run package-win // 打包Windows平台的可执行文件
npm run package-mac // 打包macOS平台的可执行文件

打包完成后,可执行文件会输出到dist目录下。

以上是将Vue.js项目打包为Windows和macOS平台可执行文件的示例代码。需要注意的

用electron将Vue项目打包为window和Mac桌面应用 (electron-packager与electron-build)

参考技术A 1.打包准备

    1.在自己需要打包的vue项目中build项目包出来,这里就不做解释了
    2.新建一个 exe文件夹 (名称自己定义)
    3.克隆项目 地址:git clone https://github.com/electron/electron-quick-start
        

 2.配置环境

    1.cd 进入 electron-quick-start 文件夹 npm install 添加依赖 (依赖包60M左右 )

     2.完成后 将步骤一种build出来的包放入 electron-quick-start 文件夹 如图
        

    3.修改main.js入口文件,
        修改前

      修改后 这里 的路径是build出来文件名称 

        

    4.启动 npm run start

        

                 项目启动完成

3.打包

        1.使用  electron-packager 方式打包,因为依赖还环境问题 现在只能打出window 版本 MAc版本需要使用另一种方式 。
               添加依赖 npm install electron-packager --save-dev 

            

        2.修改package.json 中 

"scripts":

      "start": "electron .",   

      "packager": "electron-packager ./ VEA_L --platform=win32 --arch=x64 --electron-version=2.0.0 --overwrite"

 

      然后 npm run packager 打包 
        

   打包完成 

    

    VEA_L-win32-x64 中的exe就是执行文件 

注 此方法只支持打包 window 和linux 版本 mac版本不支持 (没找到解决办法)
    2.使用  electron-build  方式打包 支持window 和Mac (mac版本只有在mac os上才可打包完成 )

    添加 依赖  建议方法一
       方法一  全局装 yarn  环境  (mac os 自行百度) 

                    npm install -g yarn
                   安装 依赖 yarn add electron-builder --save-dev
        方法二 npm 安装 

                npm install electron-builder
       修改 package.json 中

  "build": "appId": "com.xxx.app", "copyright":"LEON", "productName":"亦思辰","mac": "target": ["dmg","zip"],"win": "target": ["nsis","zip"] ,

"scripts": "start": "electron .",    "packager": "electron-packager ./ VEA_L --platform=win32 --arch=x64 --electron-version=2.0.0 --overwrite", "distWin": "electron-builder --win --x64","distMac": "electron-builder --mac --x64","dist": "npm run distWin && npm run distMac",

    执行命令 打出对应环境包 npm run dist 

    

我因为是window 所以 window打包成功,macos报错,(用macOs 亲测可用 ) 打包完成dist中如下 

注意 完成后 window 会出现 菜单栏 隐藏需要修改 main.js 如下 就可以解决 

总结:以上的俩种方式都可以打包出exe方式不同,都可以配置Ioc图标,这里就不做演示了,有疑问欢迎提意见,共同进步。

以上是关于前端vue项目打包成win和mac端 .exe文件的方法 用代码实现的主要内容,如果未能解决你的问题,请参考以下文章

vue项目打包成apk

使用electron打包vue项目 打包配置,打包exe文件和安转包

使用electron打包vue项目 打包配置,打包exe文件和安转包

springboot+vue项目部署到linux_arm64系统

springboot+vue项目部署到linux_arm64系统

springboot+vue项目部署到linux_arm64系统