[Electron-Vue]构建桌面应用(1)-项目构建-打包

1.前言

最近由于公司项目需求，需要调研Electron去打包项目发布，为什么使用Electron？主要原因是因为它本身跨平台，并且内嵌Chrome，不存在浏览器兼容的问题。我想任何一个前端都需要面临令人头大的问题就是——浏览器兼容性。

之所以选择Electron-Vue是因为，之前学习过Vue，但是一直没有在实际的工作中使用过，所以也为了vue实战，所以选择Electron-Vue，学习Electron的同时，也复习一下Vue.

现在都讲集成式开发，Electron-Vue集成了Vue的核心代码，Vuex以及Vue-router，在开发的时候更得心应手。

闲话少说，书归正传。

2.项目构建

• 安装vue-cli和脚手架模板
• 执行npm run dev

2.1 安装脚手架

• 安装vue-cli

npm install -g vue-cli

• 安装脚手架模板

vue init simulatedgreg/electron-vue my-project

• 安装依赖

cd my-project
npm install

• 启动服务

npm run dev

2.2 问题

在启动服务的时候，并没有那么顺利，这也像我之前那篇文章说的会出现进程错误，至于解决方案可以参考：

Electron-vue ReferenceError: process is not defined

2.3 打包Exe文件并执行

• 打包的话需要借助electron-packager插件，需要安装

npm install -g electron-packager

• 配置package命令

    格式参考官网

electron-packager   --platform= --arch= [optional flags...]

  翻译过来大概就是这样的，如果每次执行package你需要覆盖之前的文件，使用--overwrite

  electron-packager <应用目录> <应用名称> <打包平台> --out <输出目录> <架构> <应用版本> 

    "package": "electron-packager . HelloWorld --win --out ../HelloWorldApp --arch=x64 --app-version=0.0.1 --electron-version=2.0.4 --overwrite"

• 执行打包命令

npm run package  //或者 npm run-script package

• 执行exe文件

    因为我是在当前项目同级目录配置的路径，所以需要切换到生成的目录下执行exe文件，当然你也可以在当前项目下通过切换        目录的形式执行

start ..\HelloWorldApp\HelloWorld-win32-x64\HelloWorld.exe

  就可以看到打开了一个桌面应用，当然现在还不能说是一个完整意思上的桌面应用，因为毕竟没有安装功能。在之后的博客中会

  研究一下怎么生成桌面应用。