如何修复块加载失败？

Question

我正在尝试在前端使用 Vue 和 Monaco Editor 并在后端使用 Asp.Net Core 3 制作一个 Web 应用程序。\n我也在使用 webpack，因为我使用的是 Vue 单页面组件。\n我是 webpack 的新手，并且不了解其所有功能。不管怎样，webpack 将构建分割成几个文件（看起来是块）。但是，在加载网页时，我不断收到错误Uncaught (in promise) ChunkLoadError: Loading chunk 2 failed.\n我尝试用谷歌搜索答案，但到目前为止我所做的一切都不起作用。

\n

这是我的 package.json 和 webpack.config.json。

\n

包.json

\n

    {\n    "name": "parvis",\n    "version": "1.0.0",\n    "description": "This is a description",\n    "main": "main.js",\n    "scripts": {\n        "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",\n        "serve": "cross-env NODE_ENV=development webpack --devtool source-map --progress --hide-modules",\n        "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"\n    },\n    "keywords": [\n        "dataflow"\n    ],\n    "author": "Marin Agli\xc4\x87 \xc4\x8cuvi\xc4\x87",\n    "license": "MIT",\n    "dependencies": {\n        "bootstrap": "^4.3.1",\n        "bootstrap-vue": "^2.0.2",\n        "escodegen": "^1.12.0",\n        "filbert": "^0.1.20",\n        "lodash": "^4.17.15",\n        "monaco-editor": "^0.18.1",\n        "monaco-editor-webpack-plugin": "^1.7.0",\n        "vee-validate": "^3.0.8",\n        "vue": "^2.6.10",\n        "vue-monaco": "^1.1.0",\n        "vue-router": "^3.1.3"\n    },\n    "devDependencies": {\n        "@babel/core": "^7.6.2",\n        "@babel/preset-env": "^7.6.2",\n        "babel-loader": "^8.0.6",\n        "cross-env": "^6.0.3",\n        "css-loader": "^3.2.0",\n        "html-webpack-plugin": "^3.2.0",\n        "rimraf": "^3.0.0",\n        "uglifyjs-webpack-plugin": "^2.2.0",\n        "vue-loader": "^15.7.1",\n        "vue-style-loader": "^4.1.2",\n        "vue-template-compiler": "^2.6.10",\n        "webpack": "^4.41.0",\n        "webpack-cli": "^3.3.9",\n        "webpack-dev-server": "^3.8.2"\n    }\n    \n    }\n

\n

这是我的 webpack.config.js。

\n

    const path = require(\'path\');\n    const webpack = require(\'webpack\');\n    const VueLoaderPlugin = require(\'vue-loader/lib/plugin\');\n    const UglifyJsPlugin = require(\'uglifyjs-webpack-plugin\');\n    const MonacoWebpackPlugin = require(\'monaco-editor-webpack-plugin\');\n    \n    module.exports = {\n        mode: process.env.NODE_ENV,\n        entry: {\n            main: \'./wwwroot/client/src/main.js\',\n            // \'editor.worker\': \'monaco-editor/esm/vs/editor/editor.worker.js\'\n        },\n        output: {\n            globalObject: \'self\',\n            path: path.resolve(__dirname, \'./wwwroot/vuebundles/\'),\n            publicPath: \'/wwwroot/vuebundles/\',\n            filename: \'[name].build.js\',\n            chunkFilename: \'[name].chunk.js\'\n        },\n        module: {\n            rules: [\n                {\n                    test: /\\.css$/,\n                    use: [\n                        \'vue-style-loader\',\n                        \'css-loader\'\n                    ],\n                }, {\n                    test: /\\.vue$/,\n                    loader: \'vue-loader\',\n                },\n                {\n                    test: /\\.js$/,\n                    loader: \'babel-loader\',\n                    exclude: /node_modules/\n                },\n                {\n                    test: /\\.(png|jpg|gif|svg)$/,\n                    loader: \'file-loader\',\n                    options: {\n                        name: \'[name].[ext]?[hash]\'\n                    }\n                },\n            ]\n        },\n        plugins: [\n            new VueLoaderPlugin(),\n            new MonacoWebpackPlugin({\n                languages: [\'javascript\', \'csharp\']\n            })\n        ]\n    };\n

\n

据我所知，过去曾提出过类似的问题，但大多数都没有得到答复。我尝试过的任何解决方案都不适合我。

\n

Answer 1

我花了很长一段时间才发现我的 publicPath 是错误的。可能是因为在 webpack 开始创建块之前我没有使用它。无论如何，publicPath 属性应该是：

publicPath: '/vuebundles/', 

没有“wwwroot”。