Vue3-Electron生产构建遇webpackJsonp未定义错误求助

问题 #

基于vue-cli3构建Electron应用，Vue项目在开发/生产模式下运行正常，执行npm run electron:serve启动开发模式也无问题，但打包后的Electron应用中，所有JS文件均抛出Uncaught TypeError: Cannot read property 'webpackJsonp' of undefined错误。

现有配置 #

vue.config.js

module.exports = {
    configureWebpack: config => {
        const tsLoader = config.module.rules.find((loader) => loader.test === /\.ts$/);
        const tsLoaderIndex = config.module.rules.indexOf(tsLoader);
        const webWorkerLoader = {
            test: /\.worker\.ts$/,
            use: [
                {
                    loader: 'worker-loader',
                    options: {
                        filename: 'WorkerName.[hash].js',
                        inline: 'fallback',
                    }
                }
            ]
        }
        config.module.rules = [...config.module.rules.slice(0, tsLoaderIndex-1), webWorkerLoader, ...config.module.rules.slice(tsLoaderIndex-1)]
        // console.log(config.module.rules);
        if (process.env.NODE_ENV === 'production') {
            config.mode = 'production'
            // pack dependencies separately
            let optimization = {
                runtimeChunk: 'single',
                splitChunks: {
                    chunks: 'all',
                    maxInitialRequests: Infinity,
                    minSize: 20000,
                    cacheGroups: {
                        vendor: {
                            test: /[\\/]node_modules[\\/]/,
                            name (module) {
                                // get the name. E.g. node_modules/packageName/not/this/part.js
                                // or node_modules/packageName
                                const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
                                // npm package names are URL-safe, but some servers don't like @ symbols
                                return `npm.${packageName.replace('@', '')}`
                            }
                        }
                    }
                }
            }
            Object.assign(config, {
                optimization
            })
        }
    },

    parallel: false,

    chainWebpack: config => {
        config.output.globalObject('this')
    },

    pluginOptions: {
      'style-resources-loader': {
        preProcessor: 'scss',
        patterns: []
      }
    },

    css: {
        loaderOptions: {
            less: {
                lessOptions: {
                    modifyVars: {
                        'font-size-base': '18px'
                    },
                    javascriptEnabled: true
                }
            }
        }
    },

    devServer: {
        host: '127.0.0.1',
        port: 8080,
        public: 'localhost:8080',
      }
}

package.json

{
  "name": "testApp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "electron:build": "vue-cli-service electron:build",
    "electron:serve": "vue-cli-service electron:serve",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps"
  },
  "main": "background.js",
  "dependencies": {
    "@ant-design/icons-vue": "^6.0.1",
    "@kyvg/vue3-notification": "^2.3.4",
    "ant-design-vue": "^2.2.8",
    "bioseq": "^0.1.5",
    "core-js": "^3.6.5",
    "echarts": "^5.3.3",
    "idb-keyval": "^5.1.3",
    "jszip": "^3.7.1",
    "lodash": "^4.17.21",
    "pako": "^1.0.11",
    "pdfmake": "^0.2.5",
    "vue": "^3.2.4",
    "vue3-infinite-scroll-good": "^1.0.2",
    "xlsx": "^0.17.2"
  },
  "devDependencies": {
    "@babel/core": "^7.14.6",
    "@babel/preset-env": "^7.14.7",
    "@babel/preset-react": "^7.14.5",
    "@types/electron-devtools-installer": "^2.2.0",
    "@types/node": "^16.0.0",
    "@types/pako": "^1.0.2",
    "@types/pdfmake": "^0.2.1",
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.1.4",
    "@vue/eslint-config-typescript": "^7.0.0",
    "electron": "^13.6.9",
    "electron-devtools-installer": "^3.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0",
    "less": "^4.1.2",
    "less-loader": "^7.3.0",
    "style-resources-loader": "^1.4.1",
    "typescript": "~4.1.5",
    "vue-cli-plugin-electron-builder": "~2.1.1",
    "vue-cli-plugin-style-resources-loader": "~0.1.5",
    "worker-loader": "^3.0.8"
  }
}

已知错误源于webpack配置，但仅找到vue-cli2的修改方案，求vue-cli3下的配置调整方法。

解决方案 #

该错误是Electron主/渲染进程环境差异、webpack代码分割配置、worker-loader设置三者冲突导致的，按以下步骤修改vue.config.js：

1. 调整runtimeChunk配置，避免全局变量缺失 #

生产环境下，针对Electron关闭单独抽离runtimeChunk，避免全局变量未提前加载：

if (process.env.NODE_ENV === 'production') {
    config.mode = 'production'
    let optimization = {
        // Electron环境下关闭runtimeChunk，避免webpackJsonp变量缺失
        runtimeChunk: process.env.VUE_APP_PLATFORM === 'electron' ? false : 'single',
        splitChunks: {
            chunks: 'all',
            maxInitialRequests: Infinity,
            minSize: 20000,
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    name (module) {
                        const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
                        return `npm.${packageName.replace('@', '')}`
                    }
                }
            }
        }
    }
    Object.assign(config, { optimization })
}

同时修改package.json的scripts，添加环境变量标记：

"electron:build": "cross-env VUE_APP_PLATFORM=electron vue-cli-service electron:build",

（若未安装cross-env，先执行npm i cross-env --save-dev）

2. 修正worker-loader配置，补全ts编译支持 #

原配置未添加ts-loader处理worker的ts文件，且inline模式在Electron打包时易出问题，调整如下：

const webWorkerLoader = {
    test: /\.worker\.ts$/,
    use: [
        {
            loader: 'worker-loader',
            options: {
                filename: 'js/WorkerName.[hash].js', // 与其他脚本同目录，避免路径问题
                inline: true, // 内联worker代码，规避独立脚本加载异常
            }
        },
        // 新增ts-loader编译worker的ts文件
        { loader: 'ts-loader', options: { transpileOnly: true } }
    ]
}

3. 替换globalObject为self，适配Electron环境 #

Electron渲染进程中self比this更稳定，修改chainWebpack配置：

chainWebpack: config => {
    config.output.globalObject('self')
}

4. 新增electronBuilder配置，确保脚本被正确打包 #

在pluginOptions中添加Electron打包的文件包含规则：

pluginOptions: {
    'style-resources-loader': {
        preProcessor: 'scss',
        patterns: []
    },
    electronBuilder: {
        files: [
            'dist/**/*',
            'background.js'
        ],
        builderOptions: {
            // 保留原有平台配置（如win/mac）
        }
    }
}

内容的提问来源于stack exchange，提问作者Quattro Zepplin