Electron Builder （vue-cli-plugin-electron-builder） 打包后显示无法找到第三方模块问题解决方案之一

使用的是：Electron Builder
文档为：https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/#installation

正片：

开发完成后打包，由于内部文件引用了electron-log，打包后发现提示Cannot find module，于是开始寻找问题所在：

查看了一些资料后，检查外层的package.json中的dependencies发现很全

 "dependencies": {
    "core-js": "^3.6.5",
    "electron": "^13.0.0",
    "electron-log": "^4.4.4",
    "qrcode": "^1.5.0",
    "soap": "^0.43.0",
    "view-design": "^4.7.0",
    "vue": "^2.6.11",
    "vue-router": "^3.5.3",
    "vuex": "^3.6.2",
    "x2js": "^3.4.2"
  },

但是打包后仍然不能读取到第三方模块，仍然提示Cannot find module

然后发现了当执行npm run electron:build后生成的文件夹dist_electron下的bundled中也存在package.json，打开后发现dependencies是空的，然后去溯源代码找到如何生成的package.json，找到了如下位置：

node_modules\vue-cli-plugin-electron-builder\index.js

在其中搜索package.json后找到底159行的位置有如下代码：

// Copy package.json to output dir
const pkg = JSON.parse(
fs.readFileSync(api.resolve('./package.json'), 'utf8'))
const externals = getExternals(api, pluginOptions)
// https://github.com/nklayman/vue-cli-plugin-electron-builder/issues/223
// Strip non-externals from dependencies so they won't be copied into app.asar  
Object.keys(pkg.dependencies || {}).forEach((dependency) => {
     if (!Object.keys(externals).includes(dependency)) { 
      delete pkg.dependencies[dependency]
     }
})
fs.writeFileSync(
      `${outputDir}/bundled/package.json`,
      JSON.stringify(pkg, null, 2)
)

可以看出这段代码的意思是读取package.json，将其内部的dependencies的key值进行遍历，然后判断其key是否存在于externals内，如果不存在则删除key，然后输出了一下externals发现为空，所以导致了打包出来的package.json中的dependencies是空的，找到问题了，于是打开上面的issue，提供的方案如下：

今天我的依赖项（“尖锐”）遇到了同样的问题，经过长时间的调试，我找到了解决方案。

而不是评论这一行https://github.com/nklayman/vue-cli-plugin-electron-builder/blob/master/index.js#L153

您可以将此代码添加到您的 vue.config.js

pluginOptions: {
    electronBuilder: {
        externals: ['sharp'],
    },
},
我的整个配置现在看起来像这样 vue.config.js

module.exports = {
    configureWebpack: {
        externals: {
            sharp: 'commonjs sharp',
        },
    },
    pluginOptions: {
        electronBuilder: {
            externals: ['sharp'],
        },
    },
}
抄送：@nklayman

至此问题得到解决，只需要在vue.config.js中添加：

pluginOptions: {
        electronBuilder: {
            nodeIntegration:true,
            externals:[
                "core-js", 
                "electron-log" ,
                "qrcode",
                "soap",
                "view-design",
                "vue",
                "vue-router",
                "vuex",
                "x2js"
            ],
        }
}

即可在打包后正常生成package.json，至此打包后即可访问第三方模块。