electron-vue打包成Mac版本

elelctron-vue官方网址:https://simulatedgreg.gitbooks.io/electron-vue/content/cn/

一、场景:

electron-vue是实用vue来搭建一个PC端的桌面应用.然后通过electron打包成不同华宁下的左面应用程序.

在mac电脑上如何将electron-vue打包成.app文件?

下面是对这个问题作出的操作
1、在项目的package.json文件添加以下代码

"mac": "node .electron-vue/build.js && electron-builder --platform=mac",

完成后如下

"scripts": {
    "build": "node .electron-vue/build.js && electron-builder",
    "build:dir": "node .electron-vue/build.js && electron-builder --dir",
    "build:clean": "cross-env BUILD_TARGET=clean node .electron-vue/build.js",
    "build:web": "cross-env BUILD_TARGET=web node .electron-vue/build.js",
    "dev": "node .electron-vue/dev-runner.js",
    "mac": "node .electron-vue/build.js && electron-builder --platform=mac",	//此处为添加打包成mac版本的软件包
    "lint": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter src",
    "lint:fix": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter --fix src",
    "pack": "npm run pack:main && npm run pack:renderer",
    "pack:main": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.main.config.js",
    "pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.renderer.config.js",
    "postinstall": "npm run lint:fix"
  },

然后就可以使用以下命令进行打包,如果有疑问可以看下面打包块的介绍

npm run mac

问题:
在mac上打包时出现下载electron-v2.0.18-darwin-x64.zip下载错误,错误如下图

解决办法如下:
通过npm下载不下来electron-v2.0.18-darwin-x64.zip这个包,那只能通过其他方式,离线下载,然后放到对应的目录里
在win的目录为 C:\Users*****\AppData\Local\electron\Cache
在mac的目录为 ~/Library/Caches/electron/

使用淘宝镜像下载electron-v2.0.18-darwin-x64.zip文件地址为https://npm.taobao.org/mirrors/electron/
在淘宝镜像中找到需要下载的版本下载文件然后将下载后的electron-v2.0.18-darwin-x64.zip根据上诉的系统选择需要选择地址

完成后使用打包命令打包即可

参考资料:
Mac 安装electron缓慢的3种解决方案https://blog.csdn.net/simplehouse/article/details/95594955
Electron 打包问题：electron-builder 下载各种依赖出错https://blog.csdn.net/cctvcqupt/article/details/87904368
electron入坑指南https://www.cnblogs.com/xueyoucd/p/8006610.html
electron淘宝镜像地址https://npm.taobao.org/mirrors/electron/

安装

该样板代码被构建为 vue-cli 的一个模板，并且包含多个选项，可以自定义你最终的脚手架程序。本项目需要使用 node@^7 或更高版本。electron-vue 官方推荐 yarn 作为软件包管理器，因为它可以更好地处理依赖关系，并可以使用 yarn clean 帮助减少最后构建文件的大小。

# 安装 vue-cli 和 脚手架样板代码
npm install -g vue-cli
vue init simulatedgreg/electron-vue my-project

# 安装依赖并运行你的程序
cd my-project
yarn # 或者 npm install
yarn run dev # 或者 npm run dev

友情提示安装以来的时候,避免实用cnpm,尽量实用yarn和npm,当然,在某些情况下需要翻墙安装依赖,特别是打包时.

打包

electron是一种可以将网页打包成左面应用程序的技术,可以根据配置的参数不同打包成win,mac,linux三种平台的安装文件,具体的配置方式在徐昂木的package.json文件中,下面是electron-vue项目package.json文件中的一段配置

"scripts": {
    "build": "node .electron-vue/build.js && electron-builder",
    "build:win32": "node .electron-vue/build.js && electron-builder --platform=win32 --arch=ia32", // 这个是windows环境下打包命令
    "build:dir": "node .electron-vue/build.js && electron-builder --dir",
    "build:clean": "cross-env BUILD_TARGET=clean node .electron-vue/build.js",
    "build:web": "cross-env BUILD_TARGET=web node .electron-vue/build.js",
    "dev": "node .electron-vue/dev-runner.js",
    "pack": "npm run pack:main && npm run pack:renderer",
    "pack:main": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.main.config.js",
    "pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.renderer.config.js",
    "postinstall": ""
  },

其中–platform是配置打包成什么平台的安装文件,下面是可选的值

• win系统: win或者win32,即–platform=win或者–platform=win32
• mac系统: mac或者darwin, 即–platform=mac或者–platform=darwin
• linux系统: linux, 即–platform=linux
• 所有平台:all, 即–platform=all

其中–arch是指定系统是什么架构的,常见的例如32位和64位操作系统,这个参数的可选值有

• ai32, 即–arch=ia32, 32位操作系统,也可以在64位操作系统中安装
• x64, 即–arch=x64, 64位操作系统, 实用本架构打包无法再32位操作系统中安装
• armv7I, 即–arch=armv7I,使用比较少
• arm64, 即–arch=arm64,使用比较少

参数–platform和–arch已经被标志为过期,新的写法如下

• electron-builder --win --x64
• electron-builder --win --ia32
• electron-builder --win --armv7l

如果–platform和–arch两个参数都没有指定,那么在打包的时候会参考当前操作系统的架构和平台进行打包,也就是说,一下命令如果在不同的操作系统上运行结果也是不一样的

electron-builder

---

对应的打包指令
yarn run build

再次提示:打包过程中有些依赖需要翻墙下载,所以,尽量翻墙后再打包,当然有的人并没有翻墙,也想打包怎么办,这时候就需要手动下载翻墙才能下载的依赖软件包放到指定文件夹即可.