在vuejs中使用动态布局

Question

我试图在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>

错误：找不到模块：错误：无法解析"@/layouts/$｛layout｝.vue"字段"browser"不包含作为模块解析的有效别名配置

Answer 1

您正试图使用模板文本的语法，但这需要反引号(而不是引号，因为引号会创建一个常规字符串(：

import('@/layouts/${layout}.vue'); ❌ single quotes does not create a template literal
import(`@/layouts/${layout}.vue`); ✅