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为返回值
   });
 },