使用 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));
          }
   );
}

注意解析和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 (resolve) {
  require([route.meta.componentPath], resolve);
}

但是后面的代码到目前为止与原始代码不同。我并不是将此标记为答案，而是作为一种解决方法，因为真正知道它是如何正确完成的会很好。