使用的是: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,至此打包后即可访问第三方模块。

Logo

前往低代码交流专区

更多推荐