vue路径写法之关于./和@/的区别

当使用Vue构建项目时，路径写法是必不可少的知识点，对于路径写法中的"./"与"@/"的区别，以下是详细讲解：

1. 相对路径"./"

使用相对路径"./"，我们可以引用同一目录下的文件或目录。例如，有以下文件目录结构：

├── src
│   ├── components
│   │   ├── a.vue
│   │   ├── b.vue
│   ├── views
│   │   ├── c.vue
│   ├── router
│   │   ├── index.js

在a.vue中使用相对路径"./"引用b.vue，代码应该如下：

<template>
  <div>
    <b></b>
  </div>
</template>

<script>
import B from './b.vue'

export default {
  components: {
    B
  }
}
</script>

上述代码中，我们将b.vue通过相对路径"./"引入到a.vue中，可以看到路径中的"./"就表示当前目录的路径。

2. 绝对路径"@/"

使用绝对路径"@/"，我们可以引用根目录下的文件或目录。例如，同样的文件目录结构中，我们需要引用src目录下的views目录中的c.vue文件，我们可以在a.vue中通过"@/"引用，代码如下：

<template>
  <div>
    <c></c>
  </div>
</template>

<script>
import C from '@/views/c.vue'

export default {
  components: {
    C
  }
}
</script>

上述代码中，我们将views目录下的c.vue通过绝对路径"@/"引入到a.vue中，其中"@/"表示根目录，即src目录。需要特别注意的是，使用绝对路径"@/"引用文件时，需要在项目配置中配置别名，例如：

// vue.config.js
module.exports = {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
}

别名配置中，我们设置了"@/"为src的绝对路径，这样我们在代码中就可以通过"@/"引用src目录下的文件或目录了。

以上就是"./"和"@/"路径写法的区别和使用方法，需要注意的是，不同的路径写法在使用上会有一些细微的差别，例如，在Vue Router中使用时，"./"与"@/"有着不同的用法，需要根据实际情况具体分析。