vue中获取组件

Zeng　

已于 2024-02-28 20:09:42 修改

阅读量477

点赞数 4

文章标签： vue.js javascript 前端

于 2024-02-28 20:04:38 首次发布

ZYing

本文链接：https://blog.csdn.net/sjajjajusja/article/details/136354937

版权

本文介绍了如何使用Node.js的`require.context`方法在Webpack中动态加载和管理`.vue`文件的组件，并将其整理为可导出的对象，便于在项目中复用。

摘要由CSDN通过智能技术生成

const requireComponent = require.context("./", true, /.(vue)$/);

var fileArr = [];
requireComponent.keys().forEach((fileName) => {
    const componentConfig = requireComponent(fileName);
    let compName = fileName.split("/")[fileName.split("/").length - 1].split(".")[0];
    if (componentConfig.default) {
        fileArr.push({
            name: compName,
            compnent: componentConfig.default,
        });
    }
});
export default fileArr;

const requireComponent = require.context('./', false, /\w+\.vue$/)

let comps = {}

requireComponent.keys().map(fileName => {
  let comp = requireComponent(fileName).default;
  if(comp&&comp.name) comps[comp.name] = comp
})
export default comps;