Javascript 在vuejs中使用动态布局

我试图在vuejs中使用布局，但是我遇到了一个障碍，组件必须动态导入。Webpack抛出一个错误

<template>
  <component :is="layout">
    <slot />
  </component>
</template>

<script>
const defaultLayout = './AppDefaultLayout';
export default {
  name: "AppLayout",
  computed: {
    layout() {
      const layout = this.$route.meta.layout || defaultLayout;
      return () => import('@/layouts/${layout}.vue');
    }
  }
}
</script>

const defaultLayout='./AppDefaultLayout'；
导出默认值{
名称：“AppLayout”，
计算：{
布局（）{
const layout=this.$route.meta.layout | | defaultLayout；
return（）=>import（'@/layouts/${layout}.vue'）；
}
}
}

错误：找不到模块：错误：无法解析“@/layouts/${layout}.vue”

---

字段“browser”不包含有效的别名配置解析为您尝试使用的语法的模块，但需要反勾号（不是引号，这将创建常规字符串）：

import（'@/layouts/${layout}.vue'）；❌ 单引号不创建模板文字
导入（`@/layouts/${layout}.vue`）；✅

感谢@tony19的帮助，我实际上使用了反勾号，但仍然出现了错误，另一个问题是使用@alias声明路径，一个简单的“/”和一个相对路径就可以了。