当我try 使用import()函数导入动态组件时,我收到以下错误:
[Vue warn]: Failed to resolve async component: function () {
return __webpack_require__("./src/components/types lazy recursive ^\\.\\/field\\-.*$")("./field-" + _this.type);
}
Reason: Error: Loading chunk 0 failed.
不幸的是,我不知道是什么导致了这个错误.我已经try 在vue加载程序配置中将esModule设置为false,原因是Release Notes.
我使用vue cli 2.9.2和webpack模板来设置此项目,以下是实际组件的代码:
<template>
<div>
<component :is="fieldType">
<children/>
</component>
</div>
</template>
<script>
export default {
name: 'DynamicComponent',
props: {
type: String,
},
computed: {
fieldType () {
return () => import(`./types/type-${this.type}`)
}
}
}
</script>
[RESOLVED]
The code above works. The issue was based on the Loading chunk 0 failed
due to an edge case. With webpack setting output: {publicPath: '/'}
it delivers the chunks relative to the root instead of its origin. When I embed the http://localhost:8080/app.js in my external server and called from there the import function the linked chunk url was http://myserver.com/0.js instead of http://localhost:8080/0.js. To fixed this I had to set output: {publicPath: 'http://localhost:8080/'}
in the webpack configuration.