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

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

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图标,这里就不做演示了,有疑问欢迎提意见,共同进步。

Mac电脑一个强大的功能就是可以让用户创建多个桌面,每个桌面打开不同的应用,这样显得桌面不会太杂乱,苹果电脑如何开启多个桌面呢?这里macw我为大家带来了Mac电脑多桌面添加和使用技巧,一起来看看吧!

打开Mission Control(调度中心)

Mission Control 是一种查看 Mac 上当前所有已打开内容的快速方式。要使用 Mission Control,可以通过以下任意一种方式:

触摸板四指向上平移(你也可以在系统偏好设置里面设成三指)

用两指轻按两下 Magic Mouse 鼠标的表面

点按Launchpad启动台中的 Mission Control(调度中心)图标

在 Apple 键盘上按 Mission Control 键(快捷键F3)

添加桌面

在Mission Control中,我们可以添加多个桌面,点击右上角的+,即可添加新的桌面

删除桌面

当鼠标悬停在某个桌面图标上时,图标左上角将会出现关闭按钮,点击即可删除

给程序分配桌面

按下快捷键F3或在触控板上四指向上推,打开调度中心,直接将应用程序窗口拖进相应的桌面中

若想让应用程序永久在某个桌面中打开,先进入该桌面,然后在Dock中右键该应用的图标,在选项列表中勾选分配给这个桌面即可

切换桌面

在触控板上四指左右滑动,即可按顺序切换桌面

若手势不生效,可能是未启用该手势,打开系统偏好设置的触控板页面,进入更多手势,勾选在全屏幕显示的应用之间轻扫

按下快捷键F3或在触控板上四指向上推,进入调度中心中,直接点击要切换的桌面

为了兼容,导致java的桌面框架要跨平台。也就是说一套代码windows,linux,mac都能用。而桌面程序是依赖于底层的系统框架的。各有特色,如果要兼容,只能拿公共属性出来。这样导致整个系统非常不好用。


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/yw/12014939.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-20
下一篇 2023-05-20

发表评论

登录后才能评论

评论列表(0条)

保存