场景:在一个页面引入多个组件,原始写法:
import view1 from "../../components/ceshi_view/view1.vue";
import view2 from "../../components/ceshi_view/view2.vue";
import view3 from "../../components/ceshi_view/view3.vue";
import view4 from "../../components/ceshi_view/view4.vue";
export default {
components: {view1, view2, view3, view4}
}
优化后代码:
const files = require.context('../../components/ceshi_view', true, /.vue/)
const modules = {}
files.keys().forEach(key => {
const name = key.replace(/(\.\/|\.vue)/g, '')
modules[name] = files(key).default || files(key)
})
export default {
components: modules,
}