如何在同一块名称下动态导入多个Vue组件？

Question

我试图将多个Vue组件导入为一个块,我最好只使用它magic comment来分配一次chunkname.

这是我尝试过的:

import(/* webpackChunkName: 'googlemap' */ '@/components/maps');

以及我导入的文件:

import Vue from 'vue';

Vue.component('google-map', () => import('@/components/maps/GoogleMapAsync.vue'));
Vue.component('widget', () => import('@/components/maps/widgets/WidgetAsync.vue'));
Vue.component('price-widget', () => import('@/components/maps/widgets/PriceWidgetAsync.vue'));
Vue.component('map-marker', () => import('@/components/maps/marker/MapMarkerAsync.vue'));
Vue.component('map-price-marker', () => import('@/components/maps/marker/MapPriceMarkerAsync.vue'));

这不会创建名称为的正确的块googlemap.以前我只是简单地把webpackChunkName每个导入放在前面,但我只想分配webpackChunkName一次,因为这些组件只会被分组.

我想做的事情与此基本相同:

https://hackernoon.com/effective-code-splitting-in-react-a-practical-guide-2195359d5d49#697a

还有另一种方法让这个工作吗？

Answer 1

我使用以下内容，使用每个文件名作为组件名称，并使用 vue- 作为前缀

const files = require.context('./', true, /\.vue$/i)
files.keys().map(key => Vue.component('Vue' + key.split('/').pop().split('.')[0], files(key).default))

那会给你你想要的。如果您愿意，可以删除前缀，但是如果您有 HTML 中存在的元素或曾经创建的元素，我更喜欢拥有它。