我已经使用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>
此示例引发错误:
未捕获(承诺中)TypeError:无法解析 Jmeter 板中的模块说明符"@/components/pages/dashboard/admin. vue "。vue:14:54
如果我用点符号替换"@"--它工作正常。需要你的帮助)
2条答案
按热度按时间rqqzpn5f1#
试着这样做:
ippsafx72#
别名定义很好,但缺少关于使用Vite导入动态资产的详细信息。我已经在answer * 中解释过了(对于Vue,但我们在这里讨论的是Vite的行为)*。
在这个设置中,"@"别名可以很好地用于简单的组件导入。但是在我的例子中,我需要在动态导入中使用模板字符串:
如果我用点符号替换"@"--它工作正常。需要你的帮助)
这是由于汇总限制。所有导入必须相对于导入文件开始,并且导入不应以变量开始。
您必须将别名(@/)替换为相对路径或绝对路径
./components
或/src/components
,就像您已经做的那样: