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

因为公司有这方面的需求，以前本身还没接触过，因而花了点时间撸了下electron-vue文档。

首先贴上electron-vue文档地址：simulatedgreg.gitbooks.io/electron-vu…

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

一、# 安装 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 !

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

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