使用 webpack 导入 vuejs 路由器组件

Question

在 vuejs 中，当我在路由器中导入一个组件时： import('@/layout') 它工作正常并且符合预期。 如果必须将结果字符串化，它看起来像这样：

function ()
{
   return Promise.resolve().then
   (
          function ()
          {
              return Object(C_Users_Admin_Documents_GitHub_MyProject_node_modules_babel_runtime_helpers_esm_interopRequireWildcard__WEBPACK_IMPORTED_MODULE_1__["default"])(__webpack_require__(/*! @/layout */ "./src/layout/index.vue"));
          }
   );
}

另一方面，当我这样动态地输入字符串部分时： import(route.meta.componentPath) 它不会解析并且看起来像这样：

function ()
{
   return Promise.resolve("".concat(route.meta.componentPath)).then
   (
          function (s)
          {
             return Object(C_Users_Admin_Documents_GitHub_MyProject_node_modules_babel_runtime_helpers_esm_interopRequireWildcard__WEBPACK_IMPORTED_MODULE_1__["default"])(__webpack_require__("./src/store/modules sync recursive")(s));
          }
   );
}

注意 resolve 和webpack_require _ 部分的区别（向右滚动）

我该如何让后者工作？ 我是 webpack 的新手，但所有错误/答案都指向它，对吗？ 我所设置的只是 babel.config.js 如下：

module.exports = {
      presets: [
        '@vue/cli-plugin-babel/preset'
      ],
      'env': {
        'development': {
          // babel-plugin-dynamic-import-node plugin converts all import() to require().
          // This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
          'plugins': ['dynamic-import-node']
        }
      }
    }

我也不是 100% 确定它在下面做了什么。

Answer 1

如果您只是用这个 function 替换整个导入，它就会起作用：

function (resolve) {
  require([route.meta.componentPath], resolve);
}

然而，背后的代码与原来的代码相去甚远。 我不是将此标记为答案，而是将其标记为解决方法，因为真正知道它是如何正确完成的会很好。