在日常使用中发现某工具用得不太顺手，于是有了自己做一个工具的想法。想做一个跨平台的桌面应用，electron是个不错的选择，于是开始了我的踩坑之旅。

环境搭建

vue+TS

有了vue-cli脚手架在，搭建vue+TS的初始环境非常简单，运行后把语言选上typescript就行。
初始化完成后，会生成一个模板项目，我们可以基于模板进行开发。

这里要提一句，如果想把原来的项目升级成使用ts的，其实非常简单，使用vue-cli执行vue add @vue/typescript就可以了，自动帮你处理好依赖问题。而且更方便的是，升级后兼容原来的写法和新写法，只要在scrip标签中不加lang="ts"就可以继续使用原来的写法，方便给原有项目逐步升级。
注，如果遇到重名的，模板文件会覆盖原有文件。所以最好在有git的情况下执行命令。此外，此方法只支持用vue-cli初始化的项目，直接使用webpack的项目请按照官方说明进行升级。

初始化后，可以安装你需要的依赖，比如element-ui。element-ui自带types文件夹，自动补全非常方便。现在常用的依赖基本都有声明文件d.ts，在编码的时候可以很明显得感觉到便利，这也是Typescript的优势之一。

electron

添加electron依赖：npm install --save-dev electron，然后在package.json的scripts加一行"electron": "electron ."，方便执行。

踩坑之旅

1. import {ipcMain} from 'electron'提示错误

electron是node服务端内容，而import默认是由webpack来处理，相当于是浏览器进程来尝试加载。浏览器进程不能调用服务进程的一些接口，如fs模块只能在服务端加载。在浏览器进程加载electron就会报错。

解决方案：
使用electron暴露出来的接口：const { ipcMain } = window.require('electron')。

2. 提示不存在window.require

由于window.require是由electron暴露出来的，TS无法识别。在main.ts中加入声明即可：

declare global {
  interface Window { require: any; }
}

此外，如果在页面中提示require没有定义，那么需要在electron主进程中new BrowserWindow里添加如下选项：

    webPreferences: {
      nodeIntegration: true,
    }

自electron 5.X开始，nodeIntegration就默认为false了，所以需要手动引入。

3. 路由中import XXX提示模块不存在

一般这种情况是没有export类出来，导出一个空类即可。使用TS后，不允许空script存在，即使页面没有任何内容都需要加一个空类。

4. 给Vue设置全局变量后TS无法识别

需要在main.ts中加入声明：

declare module 'vue/types/vue' {
  interface Vue {
    $ipc: {
      on(channel: string, listener: Function):never
      send(channel:string,data:any):never
    }
  }
}

5. 无法识别this.$refs.xx

在对应类中添加注释即可。这里以element-ui的某个组件为例：

import { ElTree } from 'element-ui/types/tree'
@Component
export default class Home extends Vue {
  $refs!:{
    tree:ElTree
  }
}

这里有多个坑：

1. 类前面必须要有@Component，否则TS无法正确处理，写在类里面的逻辑基本无效。
2. 如同例子，可以直接从element-ui中引用声明文件，但是声明文件和实际的js有差异，不要盲信声明文件。如果有特殊需求，还是要直接阅读源码，这里的声明用any来处理。
3. 默认情况下类中变量都必须要初始化，否则会报错。而我们只是需要声明变量而已，为此而关闭强制初始化配置或者手动初始化都不是最佳选择。$refs!表名此变量不会是undefined，可以移除错误提示。
4. prop的情况类似。在@prop()配置中，声明参数和类型后也不能初始化，而是由框架进行初始化。@Prop({default:null}) restoreData!: number|null

6. 使用vue-devtools

用electron来集成vue-devtools过于麻烦，一个简单的方法是使用远程调试。
yarn global add @vue/devtools安装，然后运行vue-devtools，在模板index.html中引入脚本就可以开始调试了。

打包相关

简单看了下文档，macos程序的打包只能在macos环境下，linux下打包window需要借助wine或者docker，window倒是很方便打包window和linux的程序。本人在linux下开发，不想折腾docker和wine，所以只写linux for linux的打包过程。

1. 我们使用的工具是electron-forge，首先需要安装：yarn global add @electron-forge/cli
2. linux下直接zip压缩即可，安装zip插件:yarn global add @electron-forge/maker-zip。官网提供了其他打包的格式，按照官方文档需求安装对应插件即可。
3. 修改vue的配置文件vue.config.js，添加配置publicPath: process.env.NODE_ENV === 'production' ? './' : '/'，使用相对定位引入文件。如果vue编译后的代码放在服务器，那么可以省略此步骤。
4. 在electron的主进程中，需要根据环境加载文件。开发环境使用newWin.loadURL('http://localhost:3000')，生产环境使用newWin.loadFile({__dirname+'/dist/index.html')
5. 写electron-forge的配置文件forge.config.js：

module.exports = {
    packagerConfig: {
        ignore:'src|public|main|config|.vscode'
    },
    makers: [
        {
            name: '@electron-forge/maker-zip',
            platforms: ['darwin', 'linux']
        },
    ]
}

ignore中可以写你需要除外的文件。
到这里，基础配置部分已经完成了，我们只需要编译vue后，将dist文件夹移动到electron入口文件index.js同级下，最后执行electron-forge make就可以等结果了。

PS：以上操作适用于electron主进程和vue项目分离的情况，两者有各自独立的package.json和node_modules。否则，electron-forge在打包时会把node_modules内所有文件复制过去，造成最后打包的文件非常大。如果在这种情况下需要进行优化，可以使用webpack打包electron主进程，然后打包时删掉node_modules文件夹等多余文件。

1. 下载webpack：yarn add webpack-cli --dev
2. 创建webpack配置文件webpack.config.js

const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'elecdist')
  },
  'mode':'production',
  target: 'electron-main',
};

3. 修改package.json："main": "electrondist/index.js"，添加script："buildelectron": "webpack"。
4. yarn run buildelectron生成目标文件。
5. 执行electron-forge package进行初步打包（是package，不是make）。
6. 进入out/XXX/resources/app，删除node_modules文件夹等多余文件。
7. 执行electron-forge make --skip-package完成最终打包。这里理论上可以打包成其他格式的文件。
   在linux环境下，electron-forge package初步打包就可以了，打包的结果可以正常运行，也可以压缩后再进行分发。electron本体就有180M，压缩后可以到70M，还算可以接受。