vue import from .和@的区别

作者：昔日暖阳发布日期:2025-11-26 浏览:93

// 使用 @ 符号的示例
import MyComponent from '@/components/MyComponent.vue';

// 使用相对路径的示例
import MyComponent from './components/MyComponent.vue';

@ 符号：
- @ 是一个别名，通常在 Vue 项目中配置为指向 src 目录。这样可以避免使用冗长的相对路径。
- 例如，如果你在 src/views/Home.vue 中导入 src/components/MyComponent.vue，你可以直接写 @/components/MyComponent.vue，而不需要写 ../../components/MyComponent.vue。
. 符号：
- . 表示当前目录，./ 表示从当前文件所在的目录开始查找路径。
- 使用相对路径时，路径可能会变得很长且难以维护，特别是在文件结构较深的情况下。

通过使用 @ 别名，可以使代码更简洁、易读，并且更容易维护。