探索前端开发中的路径：./、../、@/ 等详解

目录

1. ./：当前目录路径

2. ../：上级目录路径

3. @/：别名路径

3.1 引入文件时使用

3.2 在属性中使用

4. 绝对路径和相对路径

---

       在前端开发中，路径是一个至关重要的概念，它用于指定资源文件的位置，如 JavaScript 文件、样式表、图片等。然而路径并不总是那么直观，有时候会出现各种不同形式的表示方式。下面是开发中常见的路径表示方法，包括 ./、../、@/ 等，并解释它们的作用和用法。

1. ./：当前目录路径

        ./ 表示当前目录，通常用于引用当前目录下的文件或资源。例如，./styles/main.css 表示当前目录下的 styles 文件夹中的 main.css 文件。

2. ../：上级目录路径

        ../ 表示上级目录，常用于引用当前目录的上级目录中的文件或资源。例如，../images/logo.png 表示当前目录的上一级目录中的 images 文件夹中的 logo.png 文件。

3. @/：别名路径

       在一些现代的前端项目中，特别是使用 Vue.js 或 Nuxt.js 等框架时，可以看到 @/ 这样的路径表示法。这是一个别名路径，通常用于引用项目根目录中的文件或资源。例如，@/components/Header.vue 表示项目根目录（src）中的 components 文件夹中的 Header.vue 文件。

       这种引入方式需要特别注意，有时候并不生效！

3.1 引入文件时使用

       把该路径作为图片路径可以正常显示

import avatar from '@/assets/default.png'
console.log(avatar);
//控制台打印为 /src/assets/default.png

3.2 在属性中使用

        如下路径，图片无法正常显示

const avatarRoot = '@/assets/avatar/'
const imgName = ref(userInfoStore.info.userPic)
const test = avatarRoot + imgName.value
console.log(test);
//控制台显示为 @/assets/avatar/15bfadae-98cf-446e-84e8-1cddf9e029f4.png

4. 绝对路径和相对路径

       除了以上三种常见的路径表示法外，还需要了解绝对路径和相对路径的概念。绝对路径是从根目录开始的完整路径，例如 /var/www/html/index.html。而相对路径是相对于当前文件所在位置的路径，例如 ../styles/main.css。