关于vue.js:Electron-app打包后启动报错Cannot-find-module-reflectmetadata

前言

这是一系列 Electron app 开发过程中的踩坑之旅，特此记录下来，分享给大家，每一篇都是一个坑和填坑解决方案！

问题

Electron app 打包后启动报错：Cannot find module ‘reflect-metadata’

A JavaScript error occurred in the main process
Uncaught Exception:
Error: Cannot find module 'reflect-metadata'
Require stack:
- /Applications/aDemo.app/Contents/Resources/app.asar/node_modules/@nestjs/core/index.js
- /Applications/aDemo.app/Contents/Resources/app.asar/background.js
- 
at Module._resolveFilename (internal/modules/cjs/loader.js:887:15)
at Function.n._resolveFilename (electron/js2c/browser_init.js:257:1128)
at Module._load (internal/modules/cjs/loader.js:732:27)
at Function.f._load (electron/js2c/asar_bundle.js:5:12913)
at Module.require (internal/modules/cjs/loader.js:959:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object.<anonymous> (/Applications/aDemo.app/Contents/Resources/app.asar/node_modules/@nestjs/core/index.js:11:1)
at Module._compile (internal/modules/cjs/loader.js:1078:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1108:10)
at Module.load (internal/modules/cjs/loader.js:935:32)

剖析

依照谬误提醒，是表白在打包后的 app.asar/node_modules 中没有找到 reflect-metadata 这个模块，然而我在开发的 node_modules 目录中找到了这个，然而在 app.asar/node_modules 中的确没有找到 reflect-metadata，所以我狐疑是打包时没有将 reflect-metadata 打包进 app.asar/node_modules

所以猜想如果须要将这个依赖打包进去是不是须要一些额定的配置？依照这个方向在网上找了一圈都没有找到相干配置的阐明，于是我在 Github 上提交了一个 issue，而后只能一点点啃官网的英文文档了！

GIthub issue 链接：https://github.com/nklayman/v…
官网文档链接：https://nklayman.github.io/vu…

解决方案

在官网文档中找到了相似的阐明，并且依照阐明测试通过，官网文档阐明片段如下：

Native modules are supported and should work without any configuration, assuming nodeIntegration is enabled. If you get errors, you may need to set the native dependency as an webpack external (opens new window). It should get found automatically, but it might not. To do this, use the externals option:

// vue.config.js
module.exports = {
  pluginOptions: {
    electronBuilder: {
      // List native deps here if they don't work
      externals: ['my-native-dep'],
      // If you are using Yarn Workspaces, you may have multiple node_modules folders
      // List them all here so that VCP Electron Builder can find them
      nodeModulesPath: ['../../node_modules', './node_modules']
    }
  }
}

粗心就是通知开发者，如果发现打包后某些模块不工作，须要你在 electronBuilder 中配置一下！

参考资料

1、Vue CLI Plugin Electron Builder：https://nklayman.github.io/vu…