使用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 !

寫下這篇文章一方面是爲了和童鞋們分享學習過程當中的快樂，另外一方面也爲了記錄本身的成長過程。本人是入行前端時間不長的一名碼農，文中有什麼須要修正的地方歡迎各位童鞋積極指出來，我會盡可能改正。不喜勿噴，謝謝！

如需轉載請附上源地址，哈哈。。。