electron-vue官方文档: https://simulatedgreg.gitbooks.io/electron-vue/content/cn/

一、场景:

     日前有个查询手机积分和归属地的桌面应用,当然可以直接使用electron创建项目,但我想直接使用vue实现基本功能,然后通过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位操作系统，这个参数的可选值有

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

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

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

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

electron-builder

对应的打包指令
yarn run build

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

项目地址: git@github.com:briefness/electron-vue-demo.git

四、项目中遇到的问题

    使用cnpm安装依赖,打包的时候会出现, 找不到vue module的报错,所以在这里再次提醒,虽然淘宝镜像安装很快,但也会带出各种问题.

其他问题参考: https://www.cnblogs.com/xueyoucd/p/8006610.html

node版本最好是最新的,低版本的node也会导致有些依赖安装失败

五、总结

    初心是想基于vue快速开发不同系统环境下的桌面应用,在使用过程中,对electron的源代码进行了学习,在这就不进行分析了,难点主要是依赖问题,多数需要单独下载,放到指定文件,或者翻墙下载,不管怎么说,也算是完成了,再次做一个记录,如有问题,欢迎指出,互相学习.