在日常使用中发现某工具用得不太顺手，于是有了自己做一个工具的想法。想做一个跨平台的桌面应用，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
}
}
这里有多个坑：
- 类前面必须要有
@Component，否则TS无法正确处理，写在类里面的逻辑基本无效。 - 如同例子，可以直接从
element-ui中引用声明文件，但是声明文件和实际的js有差异，不要盲信声明文件。如果有特殊需求，还是要直接阅读源码，这里的声明用any来处理。 - 默认情况下类中变量都必须要初始化，否则会报错。而我们只是需要声明变量而已，为此而关闭强制初始化配置或者手动初始化都不是最佳选择。
$refs!表名此变量不会是undefined，可以移除错误提示。 - 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的打包过程。
- 我们使用的工具是
electron-forge，首先需要安装：yarn global add @electron-forge/cli - linux下直接zip压缩即可，安装zip插件:
yarn global add @electron-forge/maker-zip。官网提供了其他打包的格式，按照官方文档需求安装对应插件即可。 - 修改vue的配置文件
vue.config.js，添加配置publicPath: process.env.NODE_ENV === 'production' ? './' : '/'，使用相对定位引入文件。如果vue编译后的代码放在服务器，那么可以省略此步骤。 - 在electron的主进程中，需要根据环境加载文件。开发环境使用
newWin.loadURL('http://localhost:3000')，生产环境使用newWin.loadFile({__dirname+'/dist/index.html') - 写
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文件夹等多余文件。
- 下载
webpack：yarn add webpack-cli --dev - 创建
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',
};
- 修改
package.json："main": "electrondist/index.js"，添加script："buildelectron": "webpack"。 -
yarn run buildelectron生成目标文件。 - 执行
electron-forge package进行初步打包（是package，不是make）。 - 进入
out/XXX/resources/app，删除node_modules文件夹等多余文件。 - 执行
electron-forge make --skip-package完成最终打包。这里理论上可以打包成其他格式的文件。
在linux环境下，electron-forge package初步打包就可以了，打包的结果可以正常运行，也可以压缩后再进行分发。electron本体就有180M，压缩后可以到70M，还算可以接受。