Vue项目中配置路径别名方法

在Vue项目开发中在使用相对路径时，如果目录层级很多，相对路径写法会不太容易路径定位，同时也会造成代码冗长，不便于阅读。 一般会对常用的目录定义路径别名，方便代码编写，提高开发效率

路径别名配置

使用vue-cli 2.0的可以直接在vue.config.js中配置 如果使用vue-cli 3.0的由于在3.0版本中取消了vue.config.js文件，所以需要手动自行创建，下面放出完整的vue.config.js配置

const path = require('path');

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


module.exports = {
    lintOnSave: true,
    chainWebpack: (config) => {
      config.resolve.alias
        .set('@', resolve('src'))
        .set('@assets',resolve('src/assets'))
        .set('@components',resolve('src/components'))
        .set('@network',resolve('src/network'))
        .set('@router',resolve('src/router'))
        .set('@store',resolve('src/store'))
        .set('@views',resolve('src/views'))
    },
}