前言

@的作用其实就是为了防止在引入较多层级目录文件时出错的简易写法，诸如：

import {fitherPath} from '../../../../../../../utils/user'

因此，为了规避这种问题，我们可以配置@来简化路径。

安装path

npm  install  path  --save

在vue.config.js中进行配置

let path = require('path');

function resolve (dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@', resolve('src'))
      // key,value可以自行定义，比如.set('@@', resolve('src/components'))
      .set("assets", resolve("src/assets"))
      .set("components", resolve("src/components"))
      .set("utils", resolve("utils"))
  },
};

重新启动项目

npm run serve

项目中使用@开头的路径

import {createTimes} from '@/utils/index'