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中
使用的是: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,至此打包后即可访问第三方模块。
更多推荐
所有评论(0)