时间戳

首页 > 解决方案 > Vue 异步组件不适用于 Webpack 热模块替换

javascript - Vue 异步组件不适用于 Webpack 热模块替换

问题描述

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

这就是我注册组件的方式：

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

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

标签： javascriptvue.jswebpack

解决方案

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

解决方案

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

例子

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

推荐阅读