vue.js - 如何修复 block 加载失败？

Question

我正在尝试为前端使用 Vue 和 Monaco 编辑器，在后端使用 Asp.Net Core 3 创建一个 Web 应用程序。我也在使用 webpack，因为我使用的是 Vue 单页组件。我是 webpack 的新手，不了解它的所有功能。无论如何，webpack 将构建分成几个文件(看起来是 block )。但是，在加载网页时，我不断收到错误 Uncaught (in promise) ChunkLoadError: Loading chunk 2 failed.我试图用谷歌搜索答案，但到目前为止我所做的一切都没有奏效。

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

包.json

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

这是我的 webpack.config.js。

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

我知道过去也有人发过类似的问题，但大部分都没有得到回答。我尝试过的任何解决方案都不适合我。

Answer 1

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

publicPath: '/vuebundles/', 

没有“wwwroot”。