使用webpack动态注册vue组件

发表于 更新于
拥有多个vue组件的情况下，一个一个注册又太麻烦，写了个动态注册发方法进行遍历注册~

使用webpack动态注册vue组件

动态引入文件夹中 .vue结尾的文件，并在组件中注册

​ 这样做的好处就是可以当当前组件用到很多组件的时候，但是一个一个注册太麻烦了。所以使用webpack的context方法进行实现

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
// 以".vue"结尾
const allComponents = require.context('./components', false, /\.vue$/)
let res_components = {}
allComponents.keys().forEach(fileName => {  
  let comp = allComponents(fileName)
  res_components[fileName.replace(/^\.\/(.*)\.\w+$/, '$1')] = comp.default
})
export default {
  //注册组件
  components: res_components
}
 </script>