使用electron-vue把vue项目打包成.exe的桌面端程序

由于公司有这方面的需求，之前自己还没接触过，于是花了点时间撸了下electron-vue文档。

首先贴上electron-vue文档地址：https://simulatedgreg.gitbooks.io/electron-vue/content/cn/

接着按照文档的详细步骤一步步来：

1、# 安装 vue-cli 和 脚手架样板代码

npm install -g vue-cli

查看vue版本： vue -V

如果出现上图说明安装成功，之后

vue init simulatedgreg/electron-vue electron-vue-demo

安装依赖并运行你的程序

cd electron-vue-demo

接下来按照提示操作

官方推荐用yarn，个人也推荐用yarn，具体原因这里不作细讲，各位童鞋自行了解即可。

依赖安装完成后通过 yarn run dev 启动跑你的程序，如果程序运行成功会出现如下界面，这是官方提供的例子：

接下来就要结合自己的项目了：

如图新建一个config的文件夹，不少同学就要问了这个文件夹是干嘛用的？不要急，下面将给大家揭晓：

在config文件夹下的dev.env.js文件中加入如下代码：

module.exports = {
  NODE_ENV: '"development"',
  BASE_API: '"https://xxx.xxxx.com"', //结合自己项目调整
  API_ROOT: '"https://xxx.xxxx.com"'
}

在config文件夹下的index.js文件中加入如下代码：

module.exports = {
  build: {
    env: require('./prod.env')
  },
  dev: {
    env: require('./dev.env')
  }
}

哈哈，相信我把文件夹里的内容一贴出来不少同学就明白了，没错，就是用来配置接口请求的域名地址。但是光这样肯定没法应用到程序中，这时就要结合webpack了。相信看了文档的同学都知道这里主要分了两个进程，主进程和渲染进程。主进程配置相对简单，最主要的还是渲染进程，所以我们需要在webpack.renderer.config.js引入之前的config文件夹配置的文件。

const config = require('../config/index.js')

plugins: [
    new webpack.DefinePlugin({
      'process.env': process.env.NODE_ENV === 'production' ? config.build.env : config.dev.env
    }),
]

这样我们就把之前的文件引用到程序中了。

接下来我说一下项目结合过程中遇到的一些问题及解决方法，希望能帮助到一些遇到类似问题的同学。

公司项目中用到了jsx语法糖（不了解的同学自行百度），所以需要在.babelrc文件中加入如下代码：

"plugins": ["transform-vue-jsx", "transform-runtime"] 

否则就会出现如下的问题

这些步骤弄完后就执行yarn run build, 果然和预料的一样报错,早已习惯，哈哈。。。

后来发现是electron-builder版本的原因，官方例子安装的是

"electron-builder": "^20.19.2",  // 我们需要替换成 "electron-builder": "^19.19.1",

重复之前的命令，回车咔，果不其然，在build文件夹下就看到了我们需要的

哈哈。。。 Game Over !

写下这篇文章一方面是为了和童鞋们分享学习过程中的快乐，另一方面也为了记录自己的成长过程。本人是入行前端时间不长的一名码农，文中有什么需要修正的地方欢迎各位童鞋积极指出来，我会尽量改正。不喜勿喷，谢谢！

如需转载请附上源地址，哈哈。。。