基础部分可参考这篇 Electron + Vue 3.x + Vue Cli 4.x + TypeScript 构建桌面应用程序
重现步骤
- 把 Vue Cli 升级到最新版本（编写时为Vue Cli v5.0.4）
- 创建生成基于Vue 3版本的项目
- 构建 Electron 桌面应用程序，安装 Vue CLI Plugin Electron Builder
vue add electron-builder
- 等待安装，然后让你选择 Electron 版本，选择 ^13.0.0
Choose Electron Version (Use arrow keys)
^11.0.0
^12.0.0
> ^13.0.0
- 安装完成后，启动开发服务器，应用程序能正常跑起来了。但是我在package.json文件中devDependencies里"electron": "^13.0.0" 改成 "electron": "^17.0.0"，更新下载一遍依赖，重新跑一次项目时，就出现报错了，如下图：
截图.jpg
解决
- 仔细观察发现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"
- 发现是默认的ts-loader版本太高了，在package.json文件中的devDependencies加上ts-loader固定版本，重新更新依赖，即可成功运行项目
"devDependencies": {
"ts-loader": "^8.0.0"
}
