vue配置根目录详细步骤(用@代表src目录)

要配置Vue项目的根目录，需要进行以下步骤：

1. 打开vue.config.js文件

在Vue项目的根目录下，找到vue.config.js文件并打开它。如果你的项目中没有这个文件，可以手动创建一个。

2. 配置根目录

在vue.config.js文件中，加入如下配置代码：

module.exports = {
  // 配置根目录
  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src'))
  }
}

其中，resolve是webpack的内置函数，需要引入：

const path = require('path');
function resolve(dir) {
  return path.join(__dirname, dir)
}

这段代码的意思是将@符号表示为src目录的绝对路径，方便快捷地引用src目录下的文件。

3. 使用@代表src目录

在项目中，使用@符号代表src目录，可以使用如下方式进行引用：

<template>
  <div>
    <img src="@/assets/logo.png"/>
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

可以发现，在<img>标签中，我们使用了@/assets/logo.png来代替src目录下assets文件夹中的logo.png文件。

同样，在<script>中，我们使用了import HelloWorld from '@/components/HelloWorld.vue'来引用src目录下components文件夹中的HelloWorld.vue文件。

示例说明

例如，在Vue项目中，我们想要引用src目录下的utils文件夹中的ajax.js文件，在原本的引用方法中，我们需要这样写：

import ajax from '../../../src/utils/ajax.js'

这样写显然非常不利于维护。而通过配置@代表src目录，我们可以这样写：

import ajax from '@/utils/ajax.js'

这样，不仅简化了代码，也更易于维护。

再例如，如果我们想要在template中引用src目录下的assets文件夹中的logo.png文件，原本的写法是：

<img src="../../../../src/assets/logo.png" alt="logo">

而使用@代表src目录之后，我们可以写成：

<img src="@/assets/logo.png" alt="logo">

这样代码易读性更强，更加方便。