vite/vue 项目中带有 @ 符号的 src 别名不起作用

Question

我已经使用 Vite CLI 安装了 Vue3/TS 项目，

我的 vite.config.ts 如下所示：

import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
    plugins: [vue()],

    resolve: {
        alias: {
            '@': path.resolve(__dirname, './src'),
        },
    },
})

另外，我在 tsconfig.json 中添加了“paths”属性：

{
    "compilerOptions": {
        ...
        "baseUrl": "./",
        "paths": {
            "@/*": ["./src/*", "./dist/*"]
        }
    },
    "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

通过此设置，“@”别名可以很好地处理简单的组件导入。 但就我而言，我需要使用模板字符串进行动态导入：

<script setup lang="ts">
import { useStore } from '@/store/app'
import { computed, defineAsyncComponent } from 'vue'

const store = useStore()
const userRole = store.getUserRole

const component = computed(() => {
    return defineAsyncComponent(
        () => import(`@/components/pages/dashboard/${userRole}.vue`)
    )
})
</script>

此示例抛出错误：

未捕获（承诺中）类型错误：无法解析模块说明符“@/components/pages/dashboard/admin.vue” 在仪表板.vue:14:54

如果我用点符号替换“@” - 它工作正常。需要你的帮助）

Answer 1

尝试这样：

resolve: {
  alias: {
    '@': path.resolve(__dirname, 'src'),
  }
}

Answer 2

您的别名定义很好，但您缺少有关使用 Vite 导入动态资产的详细信息。我已经在这个答案中解释过（对于Vue，但我们在这里讨论Vite的行为） 。

通过此设置，“@”别名可以很好地处理简单的组件导入。
但就我而言，我需要使用模板字符串进行动态导入：

如果我用点符号替换“@” - 它工作正常。需要你的帮助）

这是由于汇总限制造成的。所有导入必须相对于导入文件开始，并且导入不应以变量开头。

您必须将别名 (@/) 替换为相对或绝对路径 ./components 或 /src/components，就像您已经做的那样：

const component = computed(() => {
    return defineAsyncComponent(
        () => import(`./components/pages/dashboard/${userRole}.vue`)
    )
})

• Vite 文档