vue 中import 不同层级目录下的文件的表示方式_vue import 两层目录-优快云博客

本文链接：https://blog.youkuaiyun.com/YHLSunshine/article/details/135535215

本文介绍了在Vue项目中如何有效地使用import导入不同目录下的文件，包括同一目录、上一级目录以及上一级目录以上的文件，重点讲解了相对路径的使用方法和三种目录表示方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目场景：

项目背景：

vue 项目中开发页面需要用到其它目录下的文件，需要使用 import 进行导入

问题：

  import util from '@/libs/util.js'
  import drawer from '../drawer/drawer'
  import mixinViewModule from '@/mixins/view-module'

解决方案：

一、 import 同一目录下的文件
import MyComponent from ‘./MyComponent.vue’;

二、import 上一级目录文件的方法

vue 中import 上两级的文件
在Vue中导入上两级的文件可以使用相对路径来指定。

如果要导入位于当前目录下的上两级文件，可以使用 . . /. . /作为相对路径。示例代码如下所示：

// 导入上两级的文件
import File from ’ . . /. . /File.js’;
其中，File.js表示需要导入的文件名称。根据实际情况修改文件名称及后缀。

目录三种不同的表示方式：

第一种表示方式 / ：相当于返回到项目根目录，返回到了整个项目的最根部。引入文件就比较繁琐。不过也是可以实现的。

第二种 ./ ：这是导入同级目录下的文件。

第三种 . . / ：这是导入上一级目录里的文件。
. . /表示上一级目录。你可以根据你的目录结构使用相应数量的 . . /来导入所需的文件。

所以上一级的上一级里面的文件，所有只需要重复两次就行 . . /. . /