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中的使用

参考文章：https://www.cnblogs.com/buzhiqianduan/p/7620099.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为返回值
   });
 },