Vue如何配置根目录@(引用路径)

1. 配置webpack配置文件
   在使用Vue项目时，通常会由webpack进行构建，因此我们需要在webpack配置文件中进行根目录的配置。打开webpack配置文件，在module.exports对象下添加resolve属性，并在里面添加一个alias对象，指定根目录别名和实际路径，如下所示：

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

其中，'@'是我们给根目录起的别名，它对应的是我们实际项目根目录的路径。

1. 配置Vue.config.js
   如果你在使用Vue-cli 3.0以上的版本，可以通过配置Vue.config.js文件来设置根目录别名，打开Vue.config.js文件，添加如下代码：

module.exports = {
  chainWebpack: config => {
    config.resolve.alias
      .set('@', path.resolve(__dirname, 'src'))
  }
}

通过chainWebpack方法来配置webpack，最终生成的webpack配置将被合并。在config对象上，我们设置了resolve.alias对象，然后在别名键对象中添加了一个指向我们实际项目根目录的路径。

至此，我们已经完成了Vue配置根目录的过程，可以愉快地引用根目录啦！

示例：

假设我们的Vue项目目录结构如下：

.
├── dist
│   ├── index.html
│   └── main.js
├── public
│   └── index.html
└── src
    ├── assets
    └── components

现在，我们在一个.vue组件中需要引用assets目录下的图片文件，但是我们不想写这样的引用路径：../../assets/xx.png。于是我们需要配置根目录，以便使用如下形式的引用路径：@/assets/xx.png。

经过上面的配置，我们只需要在.vue组件中这样使用就可以了：

<template>
  <div>
    <img src="@/assets/xx.png" alt="">
  </div>
</template>

如果再有其他组件需要使用根目录下的文件，可以使用同样的方式进行引用。