electron-vue打包桌面應用

1. 安裝並初始化electron-vue

1.1 全局安裝vue/vue-cli

npm install @vue/cli -g     #全局安裝vue-cli腳手架

1.2 安裝electron-vue

vue init simulatedgreg/electron-vue 項目名   #生成electron-vue項目
    cd 項目名                                    #進入項目根目錄
    npm install                                 #安裝依賴
    npm run dev                                 #運行項目

---

2. 問題及處理

2.1 npm run dev的時候會提示process is not defined。

解決辦法參考：https://www.wubo.net.cn/development/electron_vue_init_fix.html

在 .electron-vue/webpack.renderer.config.js和 .electron-vue/webpack.web.config.js文件中找到 HtmlWebpackPlugin代碼段，並更改成以下代碼：

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.resolve(__dirname, '../src/index.ejs'),
      templateParameters(compilation, assets, options) {
        return {
          compilation: compilation,
          webpack: compilation.getStats().toJson(),
          webpackConfig: compilation.options,
          htmlWebpackPlugin: {
            files: assets,
            options: options
          },
          process,
        };
      },
      minify: {
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        removeComments: true
      },
      nodeModules: process.env.NODE_ENV !== 'production'
        ? path.resolve(__dirname, '../node_modules')
        : false
    }),

2.2 electron中不顯示elementUI中表格el-table問題

參考文章： https://www.cnblogs.com/xiaoj...
咱們須要把 element-ui加入到 .electron-vue/webpack.renderer.config.js文件中的白名單裏面, 將下面這句話:

let whiteListedModules = ['vue']

修改成:

let whiteListedModules = ['vue', 'element-ui']

再運行項目，便可以成功構建出el-table表格了。

---

3. electron builder打包成.dmg或者.exe

參考文章：https://www.jianshu.com/p/d8f3942d5efc

3.1 採用electron-vue搭建的話，在初始化的時候就選擇添加builder依賴。

3.2 修改package.json文件

build參數配置：

"build": {
    "appId": "com.electron.app",
    "copyright": "Copyright ***",
    "productName": "Electron",
    "files": [
      "!dist/**/*"
    ],
    "mac": {
      "icon": "build/icon.png", // 應用程序圖標
      "category": "public.app-category.productivity",
      "artifactName": "${productName}_${version}.${ext}", // 應用程序包名
      "target": [
        "dmg",
        "zip"
      ]
    },
    "win": {
      "icon": "build/icon.png",
      "artifactName": "${productName}_${version}.${ext}",
      "verifyUpdateCodeSignature": false,
      "target": [
        {
          "target": "nsis",
          "arch": [
            "ia32"
          ] }]},
    "nsis": { 
      "oneClick": false, // 是否一鍵安裝
      "createDesktopShortcut": "always", // 是否添加桌面快捷方式
      "allowToChangeInstallationDirectory": true,// 容許修改安裝目錄
    },
    "extends": null
  }

重點修改 mac和 win選項。build中能夠適當增長nsis配置，能夠優化用戶體驗，好比是否容許用戶一鍵安裝、自定義安裝位置、是否添加桌面快捷方式、安裝完成是否當即啓動、配置安裝圖標等等。更多詳細參數配置可參見官方文檔 nsis配置。

3.3 scripts中構建命令

"electron": "electron .",  // 啓動electron 窗口
"dist": "npm run build && electron-builder", // 使用electron-builder進行打包，先生成靜態資源包再進行electron打包

3.4 執行命令進行打包

npm run dist

(其中 npm run build是項目靜態資源包生成的命令)，生成 dmg和 exe執行文件，生成的執行文件在 /build文件夾下。

3.5 指定打包平臺

注意：此時electron-builder後面沒有指定平臺和系統，打包的時候會參考當前操做系統的架構和平臺進行打包，也就是說，electron-builder若是在不一樣的操做系統上運行結果也是不同的,在mac上打出dmg, windows下生成exe，須要指定平臺和系統架構的話能夠參考下列格式：（修改 "scripts":下的 "build":選項）

electron-builder --platform --arch

platform是配置打包成什麼平臺的安裝文件:
   win系統： win32
   mac系統： darwin
   Linux系統： linux
arch是指定系統是什麼架構的，常見的例如32位和64位操做系統：
   ia32: 32位操做系統，也能夠在64位操做系統中安裝
   x64: 64位操做系統，使用本架構打包沒法在32位操做系統中安裝

如，要生成windows下執行文件exe，這樣設置package.json中的scripts中的build命令：

"build": "node .electron-vue/build.js && electron-builder --win --x64",

3.6 注意事項

還有須要 注意的一點是：mac上不簽名也能夠打包成功，安裝的時候還要更改電腦權限，可是涉及到自動更新、發佈到 app store等功能則不能用。因此說MAC包必定要添加代碼簽名,參考地址： code-signing

3.7 問題及處理方法

（1）採用cnpm install安裝依賴時候，在打包時候會發生各類未知問題。

網上建議採用 yarn安裝，可是測試安裝時候速度很慢，所以改用臨時切換淘寶源方式安裝，先將 node_modules文件夾刪除，而後在工程終端下運行：

npm --registry https://registry.npm.taobao.org install

再次打包時該問題再也不出現。

（2）electron builder打包時候electron-v2.0.18-win-x64.zip等下載失敗

  electron-builder打包時，會從github上拉取相關資源，國內網絡問題，所以只有採用離線的方式下載安裝。經過npm下載不下來 electron-v2.0.18-win-x64.zip這個包，那隻能經過其餘方式，離線下載，而後放到對應的 緩存目錄裏：
   在win的目錄爲: C:\Users\AppData\Local\electron\Cache
   在mac的目錄爲: ~/Library/Caches/electron/
注：mac下在訪達窗口使用快捷鍵： ⬆️+command+G，調出「前往文件夾」選項，便可進入系統全部文件
相關下載地址：
1.electron-v2.0.18-win32-x64下載地址，淘寶鏡像：
     https://npm.taobao.org/mirrors/electron/
2.nsis-3.0.3.2下載地址：
     https://github.com/electron-userland/electron-builder-binaries/releases/tag/nsis-3.0.3.2

---

4. electron添加菜單及快捷方式

參考文章：https://blog.csdn.net/afr3828/article/details/79129863

在主進程中 .src/main/index.js，進行添加：

// 設置菜單欄
// 設置快捷鍵，實現複製粘貼等功能
var template = [{
 label: "Application",
 submenu: [
    { label: "About Application", selector: "orderFrontStandardAboutPanel:" },
    { type: "separator" },
    { label: "Quit", accelerator: "Command+Q", click: function() { app.quit(); }}
]}, {
 label: "Edit",
 submenu: [
    { label: "Undo", accelerator: "CommandOrControl+Z", selector: "undo:" },
    { label: "Redo", accelerator: "Shift+CommandOrControl+Z", selector: "redo:" },
    { type: "separator" },
    { label: "Cut", accelerator: "CommandOrControl+X", selector: "cut:" },
    { label: "Copy", accelerator: "CommandOrControl+C", selector: "copy:" },
    { label: "Paste", accelerator: "CommandOrControl+V", selector: "paste:" },
    { label: "Select All", accelerator: "CommandOrControl+A", selector: "selectAll:" }
]}
];

同時在 createWindow()函數中

function createWindow () {
    
}

添加:

Menu.setApplicationMenu(Menu.buildFromTemplate(template)); //菜單欄快捷鍵設置

---

5. Nedb的安裝和使用

5.1 安裝

npm install nedb --save

5.2 electron-vue中的使用

參考文章：http://www.javashuo.com/article/p-nmniuoro-gn.html

（1）新建../db/datastore.js

import Datastore from 'nedb'
import path from 'path'
import { remote } from 'electron'

const db = {
//建立了三個數據庫，並自動加載
//remote.app.getPath('userData')指向electron內部用戶空間，也可指定存儲到任意位置
tableData: new Datastore({filename: path.join(remote.app.getPath('userData'), '/tableData.db'),autoload: true}),
chartData: new Datastore({filename: path.join(remote.app.getPath('userData'), '/chartData.db'),autoload: true}),
cfgData: new Datastore({filename: path.join(remote.app.getPath('userData'), '/cfgData.db'),autoload: true}),
}
export default {
  db
}

(2) 在js中導入

import db from '../db/datastore';  //引入nedb
const dataBase = db.db;

（3）調用nedb數據庫

InsertOne() {
//this.$db.chartData.loadDatabase();  //若是沒有自動加載數據庫，則須要在每次調用前手動加載數據庫
//向數據庫中插入一條數據
  dataBase.chartData.insert({ name: "tom" }, (err, docs) => {
    console.log(docs);      //docs爲返回值
   });
 },