Electron 基于 Vue Cli 5 + Vue 3 + TypeScript 构建新项目解决ts-loader报TypeError错误

基础部分可参考这篇 Electron + Vue 3.x + Vue Cli 4.x + TypeScript 构建桌面应用程序

重现步骤

1. 把 Vue Cli 升级到最新版本（编写时为Vue Cli v5.0.4）
2. 创建生成基于Vue 3版本的项目
3. 构建 Electron 桌面应用程序，安装 Vue CLI Plugin Electron Builder

vue add electron-builder

4. 等待安装，然后让你选择 Electron 版本，选择 ^13.0.0

Choose Electron Version (Use arrow keys)
  ^11.0.0
  ^12.0.0
> ^13.0.0

5. 安装完成后，启动开发服务器，应用程序能正常跑起来了。但是我在package.json文件中devDependencies里"electron": "^13.0.0" 改成 "electron": "^17.0.0"，更新下载一遍依赖，重新跑一次项目时，就出现报错了，如下图：

截图.jpg

解决

1. 仔细观察发现package.json文件中的devDependencies缺少了ts-loader的模块，但是yarn.lock中已经有了

ts-loader@^9.2.5:
  version "9.2.8"
  resolved "https://registry.npmmirror.com/ts-loader/-/ts-loader-9.2.8.tgz#e89aa32fa829c5cad0a1d023d6b3adecd51d5a48"
  integrity sha512-gxSak7IHUuRtwKf3FIPSW1VpZcqF9+MBrHOvBp9cjHh+525SjtCIJKVGjRKIAfxBwDGDGCFF00rTfzB1quxdSw==
  dependencies:
    chalk "^4.1.0"
    enhanced-resolve "^5.0.0"
    micromatch "^4.0.0"
    semver "^7.3.4"

2. 发现是默认的ts-loader版本太高了，在package.json文件中的devDependencies加上ts-loader固定版本，重新更新依赖，即可成功运行项目

"devDependencies": {
   "ts-loader": "^8.0.0"
}