因此，借助Vue和Nuxt可以懒惰地导入路线
() => import('~/layouts/Container.vue').then(m => m.default || m)
但是我不想每次添加路线时都输入.then(m => m.default || m)。因此，我创建了一个名为routeImport的函数。路由导入非常简单。看起来像这样：
const routeImport = file => import(file).then(m => m.default || m)
所以现在我可以添加我的路线了
() => routeImport('~/layouts/Container.vue')
但这不会产生相同的结果。第一个函数返回一个组件，而另一个函数则抛出错误：
Error: Cannot find module '~/layouts/Container.vue'
有人知道我该如何替换此功能吗？
听起来像是问题，您正在使用完全动态变量作为import()函数（webpack cannot statically analyze）的查询字符串，因此它没有包含在捆绑软件中所需的模块。 / p>
您可能要考虑为webpack提供有关加载内容的提示。例如：
const layoutImport = layout => import(`~/layouts/${layout}.vue`).then(m => m.default || m)
或者：
const routeImport = file =>
import(
/* webpackInclude: /layouts/(Container|OtherView|Etc).vue$/ */
file
).then(m => m.default || m)
这将导致webpack在包中包含所有布局（或正则表达式中包含的特定布局），但仍允许您动态导入它们。请注意，import()被视为拆分点，因此，文件中包含文件时，通常会将它们分组为单独的“块”。
您可以使用magic comments控制块的某些方面（例如其名称）。如果要将布局分为不同的块，则可能需要多个导入功能：
const groupAImport = file =>
import(
/* webpackInclude: /layouts/(Container1|Container2).vue$/ */
file
).then(m => m.default || m)
const groupBImport = file =>
import(
/* webpackInclude: /layouts/(Container1|Container3|Etc).vue$/ */
file
).then(m => m.default || m)