Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/vue.js/6.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/0/asp.net-core/3.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Vue.js 如何修复块加载失败?_Vue.js_Asp.net Core_Webpack_Monaco Editor - Fatal编程技术网

Vue.js 如何修复块加载失败?

Vue.js 如何修复块加载失败?,vue.js,asp.net-core,webpack,monaco-editor,Vue.js,Asp.net Core,Webpack,Monaco Editor,我正在尝试在前端使用Vue和Monaco编辑器,在后端使用Asp.Net Core 3制作一个web应用程序。 我也在使用webpack,因为我使用的是Vue单页组件。 我对webpack是新手,不了解它的所有功能。无论如何,webpack将构建拆分为几个文件(看起来是块)。但是,在加载网页时,我不断收到错误Uncaught(承诺中)ChunkLoadError:加载chunk 2失败。 我试着用谷歌搜索答案,但迄今为止我所做的一切都不起作用 这是我的package.json和webpack.c

我正在尝试在前端使用Vue和Monaco编辑器,在后端使用Asp.Net Core 3制作一个web应用程序。 我也在使用webpack,因为我使用的是Vue单页组件。 我对webpack是新手,不了解它的所有功能。无论如何,webpack将构建拆分为几个文件(看起来是块)。但是,在加载网页时,我不断收到错误
Uncaught(承诺中)ChunkLoadError:加载chunk 2失败。
我试着用谷歌搜索答案,但迄今为止我所做的一切都不起作用

这是我的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']
        })
    ]
};

据我所知,类似的问题过去也曾被提出过,但大多数问题都没有得到回答。我尝试的任何解决方案对我都不起作用。

我花了很长时间才尴尬地发现我的公共路径是错误的。 可能是因为在webpack开始创建块之前,我没有使用它。 无论如何,publicPath属性应为:

publicPath: '/vuebundles/', 

没有“wwwroot”

谢谢,我也有同样的问题