Vue 配置根目录（用@代替src）

前言

今天发现了一个项目中的路径中有@
比如：

import { getList } from '@/api/table'

又或者

import router from '@/router'

学识尚浅的我就看不懂了，但是懵懵懂懂又觉得肯定是哪里配置过了，@肯定是代替了路径的一些东西

知识点

其实多看几个文件就会发现了，@代替了src目录
看出来代替了什么其实不难，难点主要是怎么去配置它

配置

1、如果path模块，则先需要npm引入

npm  install  path  --save

2、配置jsconfig.js

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
        "@/*": ["src/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

3、配置vue.config.js

方法一：（我看的项目用的）

// 配置configureWebpack
'use strict'
const path = require('path')
const resolve = dir => path.join(__dirname, dir)
 
module.exports = {
  configureWebpack: {
    name: 'vue Element Admin',
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
  }
}

方法二：

// 配置chainWebpack
'use strict'
const path = require('path')
const resolve = dir => path.join(__dirname, dir)
  
module.exports = {
    chainWebpack: config => {
        config.resolve.alias
            .set('@', resolve('src'))
    }
}