./img、../img 和@/在vue中区别 路径区别

在 Vue.js 中，路径的引用方式对于正确地定位资源文件（如图片、组件、样式等）是非常重要的。./img、../img 和 @/ 这三种路径引用方式各自具有不同的含义和用途：

1. ./img

   • ./ 表示当前目录。
   • 因此，./img 表示从当前文件所在的目录开始查找名为 img 的子目录或文件。
   • 例如，如果你在 src/components/MyComponent.vue 文件中使用 ./img/myImage.png，那么 Vue 会尝试从 src/components/img/myImage.png 路径加载图片。

2. ../img

   • ../ 表示上一级目录。
   • ../img 表示从当前文件所在目录的上一级目录开始查找名为 img 的子目录或文件。
   • 例如，如果你在 src/components/MyComponent/MySubComponent.vue 文件中使用 ../img/myImage.png，那么 Vue 会尝试从 src/components/img/myImage.png 路径加载图片。

3. @/

   • 在 Vue CLI 创建的项目中，@ 是一个别名，通常配置为指向 src 目录。
   • 使用 @/ 可以方便地从项目的根目录 src 开始引用资源。
   • 这在大型项目中尤其有用，因为它可以避免写出冗长的相对路径。
   • 例如，如果你在 src/components/MyComponent.vue 文件中使用 @/img/myImage.png，那么 Vue 会尝试从 src/img/myImage.png 路径加载图片。

总结：

• ./img 和 ../img 是基于当前文件位置的相对路径。
• @/ 是一个别名，通常指向项目的 src 目录，用于从项目根目录开始引用资源。

在编写 Vue 项目时，建议根据项目的结构和需求选择合适的路径引用方式。使用 @/ 可以提高代码的可读性和可维护性，特别是在大型项目中。