Vue 异步组件不适用于 Webpack 热模块替换答案

【问题标题】：Vue async component not working with Webpack hot module replacementVue 异步组件不适用于 Webpack 热模块替换
【发布时间】：2021-08-22 10:13:16
【问题描述】：

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

这是我注册组件的方式：

 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/',
}

我需要什么特殊配置还是我做错了什么？

【问题讨论】：

标签： javascript vue.js webpack

【解决方案1】：

我找到了解决办法。我有两个用于开发的不同 webpack 开发服务器。 Webpack 使用 jsonp 按需加载块。为两个服务器生成的加载块的函数是相同的。这导致解析块 url 出现问题。服务器 A 正在尝试使用服务 B 端口加载资产。

解决方案

我必须明确设置 jsonp 的函数名。这可以通过 webpack output 配置属性来完成。

例子

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

【讨论】：