Esse é um tutorial que funciona no VueJS (v3.3.8) em conjunto com o Vite mais recente (v4.5.0)

É sempre importante lembrar que você pode configurar corretamente o seu projeto para que facilite certos tipos de ação aumentando a sua produtividade, e um desses tipos de configuração é como podemos melhorar métodos de chamar pastas / arquivos / imagens dentro de um projeto de forma eficiente e sem se preocupar muito com os subdiretórios, tudo isso através do path alias (@)

Geralmente chamamos as pastas por caminhos através de pontinhos e barras (navegação por pastas), por exemplo

import { MeuComponente } from "../../pasta/componente.vue";

import { MeuComponente } from "@/pasta/componente.vue";

Exemplo de código com a navegação por pastas:

1
<script setup lang="ts">
2
import App from "./App.vue";
3
</script>
4

5
<template>
6
  <App />
7
</template>
8

9
<style lang="css" scoped></style>

Exemplo de código utilizando o path alias @:

1
<script setup lang="ts">
2
import App from "@/App.vue";
3
</script>
4

5
<template>
6
  <App />
7
</template>
8

9
<style lang="css" scoped></style>

Geralmente após o processo de instalação de um novo projeto VueJS esse tipo de atalho já é adicionado e configurado automaticamente em seu projeto, mas em caso de dúvidas, acesse o arquivo vite.config.ts ou vite.config.js e verifique se irá aparecer semelhante a esse código abaixo:

1
import { fileURLToPath, URL } from "node:url";
2

3
import { defineConfig } from "vite";
4
import vue from "@vitejs/plugin-vue";
5

6
// https://vitejs.dev/config/
7
export default defineConfig({
8
  plugins: [vue()],
9
  resolve: {
10
    alias: {
11
      "@": fileURLToPath(new URL("./src", import.meta.url)),
12
    },
13
  },
14
});

O atalho @ é configurado para apontar para o diretório src do seu projeto. Isso é feito usando a função fileURLToPath e new URL do Node.js para criar um caminho absoluto para o diretório src , ou seja, você poderá indicar em qualquer pasta que esteja dentro da pasta-mãe src