Estoy tratando de cargar el componente asíncrono. Funciona bien en la construcción de producción, pero falla en el desarrollo. Utilizo el reemplazo del módulo en caliente para el desarrollo y aparece un error en la consola que indica que el componente no se pudo cargar.
Así es como registro mi componente:
Vue.component('product-page', ()=> import('./app/components/ProductPage.vue'));Error:
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")); }En la configuración de mi paquete web, tengo:
output:{ path: path.resolve(__dirname, 'dist'), filename: '[name].bundle.js' , publicPath: 'http://localhost:8088/', }¿Hay alguna configuración especial que necesito o qué estoy haciendo mal?
Encontré una solución. Tengo dos servidores de desarrollo webpack diferentes que uso para el desarrollo. Webpack usa jsonp para cargar fragmentos a pedido. La función generada para cargar fragmentos fue la misma para los dos servidores. Esto estaba causando problemas para resolver la URL del fragmento. El servidor A intentaba cargar recursos mediante el puerto del servidor B.
Solución
Tuve que establecer explícitamente el nombre de la función para jsonp. Esto se puede hacer con la propiedad de configuración de salida del paquete web.
Ejemplo
ouput: { filename: '[name].bundle.js', jsonpFunction: 'myCustomFunctionName' }