尽管路径是正确的，但在 VueJS 中使用 require.context 是不可能的答案

【问题标题】：Impossible to require a module in VueJS using require.context although the path is right尽管路径是正确的，但在 VueJS 中使用 require.context 是不可能的
【发布时间】：2022-09-28 02:18:20
【问题描述】：

我试图要求子文件夹中的每个 description.js 文件。我写了这些行：

require.context(
      \'./\',
      true,
      /description.js$/,
    ).keys()
    .forEach((k) => {
      console.log(k);
      console.log(`${k.replace(\'./\', \'@/components/subfolder/\').replace(\'.js\', \'\')}`)
      console.log(\'@/components/subfolder/tool/description\');
      const path = \'@/components/subfolder/tool/description\'; // TRY
      const t = require(path); // TRY
      //   const t = require(`${k.replace(\'./\', \'@/components/subfolder/\').replace(\'.js\', \'\')}`); // COMMENT 1
      //   const t = require(\'@/components/subfolder/tool/description\'); // COMMENT 2
      console.log(t);
    });

要求直接使用 \"COMMMENT 2\" 就像一个魅力，但我想要遍历所有我想要要求的文件，所以 \"COMMMENT 1\" 会很棒。因此，出于某种原因，您似乎必须直接在require 中写入路径。我尝试了注释\“TRY\”的两行，但它不起作用，令人惊讶！

这是我在控制台中遇到的错误：

Uncaught (in promise) Error: Cannot find module \'@/components/subfolder/tool/description\'

有人可以解释我如何动态循环子文件夹吗？

你为什么不像第一个例子here那样运行这个？ function importAll(r) { r.keys().forEach(r); } importAll(require.context(...));
抱歉，但我不知道它对我有什么帮助。
代码有点晦涩。 require.context 调用返回一个函数，如果您使用从.keys() 返回的值调用它，实际上需要将它们放入您的模块中。 .forEach(r) 与 .forEach(key => r(key)) 相同。试试看。
如果你想按照自己的方式做，你需要先在 require 方法中提供一个文字：require(\'@/components/subfolder/\' + k.replace(\'./\', \'\').replace(\'.js\', \'\'));
这就是我要说的：如果我不放一个字符串，它就行不通。

标签： vue.js webpack vuejs3 require

【解决方案1】：

我找到了答案，或者至少找到了一个可行的答案：

function importAll(r) {
  r.keys().forEach((key) => {
    outils.value[key] = r(key).details;
  });
}

importAll(require.context(
  './',
  true,
  /description.js$/,
));

【讨论】：