【发布时间】：2022-09-30 18:07:27
【问题描述】：
我正在尝试从 vue-cli3 项目构建一个电子应用程序。 vue 项目本身在开发和生产中都可以正常工作。如果我使用npm run electron:serve 运行开发模式，一切正常。但是构建的电子应用程序会在每个打包的 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\',
}
}包.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 webpack.prod.conf.js 中找到示例。我们如何在 vue-cli3 中修改它？
标签： vue.js webpack electron vue-cli-3