Recently, I set up a Vue3/TS project using the Vite CLI
The configuration in my vite.config.ts is as follows:
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'),
},
},
})
In addition, I included a 'paths' property inside tsconfig.json:
{
"compilerOptions": {
...
"baseUrl": "./",
"paths": {
"@/*": ["./src/*", "./dist/*"]
}
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}
Using this setup, I encountered an issue with dynamic imports and template strings:
<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>
This code snippet resulted in an error:
Uncaught (in promise) TypeError: Failed to resolve module specifier '@/components/pages/dashboard/admin.vue' at dashboard.vue:14:54
When I replaced '@' with dot-notation, it worked perfectly. I need some assistance with this issue)