Question

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

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

Package.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中使用它。无论如何，publicPath属性应为：

publicPath: '/vuebundles/',

没有“ wwwroot”。

如何解决块加载失败？

1 个答案: