electron-vue 打包异常,未能打包成功

问题描述

基础信息:
平台:MacOS
cli:electron-vue
打包工具:electron-builder

问题:在使用electron-builder打包的时候,运行命令:sudo yarn run build:dir,报错,如图
image.png

问题出现的环境背景及自己尝试过哪些方法

尝试清空了node_modules文件夹,用npm重新安装依赖,打包报错;
再清空node_modules文件夹,用yarn重新安装依赖,打包报错

相关代码

package.json

"scripts": {
    "build": "node .electron-vue/build.js && electron-builder",
    "build:dir": "node .electron-vue/build.js && electron-builder --dir",
    "build:clean": "cross-env BUILD_TARGET=clean node .electron-vue/build.js",
    "build:web": "cross-env BUILD_TARGET=web node .electron-vue/build.js",
    "build:mac": "node .electron-vue/build.js && electron-builder --platform=darwin",
    "dev": "node .electron-vue/dev-runner.js",
    "lint": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter src",
    "lint:fix": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter --fix src",
    "pack": "npm run pack:main && npm run pack:renderer",
    "pack:main": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.main.config.js",
    "pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.renderer.config.js",
    "postinstall": "npm run lint:fix"
  },

你期待的结果是什么?实际看到的错误信息又是什么?

希望可以打包成功

回复
阅读 3.1k
3 个回答

解决方案
两处修改:
1、在.electron-vue/webpack.renderer.config.js 文件找到CopyWebpackPlugin,大概在186行左右,

new CopyWebpackPlugin([
      {
        from: path.join(__dirname, '../static'),
        to: path.join(__dirname, '../dist/electron/static'),
        ignore: ['.*']
      }
    ]),

改为

new CopyWebpackPlugin({
      patterns: [{
        from: path.join(__dirname, '../static'),
        to: path.join(__dirname, '../dist/electron/static')
      }]
    })

2、在.electron-vue/webpack.web.config.js 文件找到CopyWebpackPlugin,大概在135行左右,

new CopyWebpackPlugin([
      {
        from: path.join(__dirname, '../static'),
        to: path.join(__dirname, '../dist/web/static')
        ignore: ['.*']
      }
    ]),

改为

new CopyWebpackPlugin({
      patterns: [{
        from: path.join(__dirname, '../static'),
        to: path.join(__dirname, '../dist/web/static')
      }]
    })

错误已经提示的非常详细了,插件配置错了
image.png

  1. 仔细看错误信息。
  2. 这个问题我以前回答过,因为 WebpackCopyPlugin 升级到 6.x 后配置结构变了,以前直接传入来源目标就行,现在需要用 patterns

    // 现在需要这样
    module.exports = {
      plugins: [
        new CopyPlugin({
          patterns: [
            { from: 'source', to: 'dest' },
            { from: 'other', to: 'public' },
          ],
        }),
      ],
    };
    
    // 以前是这样
    module.exports = {
      plugins: [
        new CopyPlugin([
          { from: 'source', to: 'dest' },
           { from: 'other', to: 'public' },
        ]),
      ],
    };
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏