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中存在的元素或曾经创建过一个元素，则我更希望使用它。

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

1 个答案: