Vue异步组件在Webpack热模块替换时不能工作

Question

我正在尝试异步加载组件。它在生产构建中运行良好，但在开发中失败。我使用热模块替换进行开发，我在控制台上得到组件加载失败的错误。

我是这样注册我的组件的:

Vue.component('product-page', ()=> import('./app/components/ProductPage.vue'));  

错误:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Failed to resolve async component: function () {
return Promise.all(/*! import() */[__webpack_require__.e(0), __webpack_require__.e(1), __webpack_require__.e(2), __webpack_require__.e(32)]).then(__webpack_require__.bind(null, /*! ././app/components/ProductPage.vue */ "./src/app/components/ProductPage.vue"));
}

在我的webpack配置中，我有:

output:{
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js' ,
publicPath: 'http://localhost:8088/',
}

我需要什么特殊配置吗?或者我做错了什么?

Answer 1

我找到了一个解决方案。我有两个不同的webpack开发服务器用于开发。Webpack使用json按需加载块。为两个服务器生成的加载块的函数是一样的。这导致了解析块url的问题。服务器A试图使用服务器B的端口加载资源。

<<p>

解决方案/strong>我必须显式地为jsonp设置函数名。这可以通过webpackoutput来完成配置属性。

例子

ouput: {
filename: '[name].bundle.js',
jsonpFunction: 'myCustomFunctionName'
}