目录
在前端开发中,路径是一个至关重要的概念,它用于指定资源文件的位置,如 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。