我正在尝试使用前端的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']
})
]
};
我了解过去曾发布过类似的问题,但大多数问题尚未得到解答。我尝试过的任何解决方案都不适合我。
我花了很长时间尴尬地发现我的publicPath错误。可能是因为在开始创建块之前,我没有在webpack中使用它。无论如何,publicPath属性应该是:
publicPath: '/vuebundles/',
没有“ wwwroot”。