Vue怎么给项目文件夹起别名

在开发项目的时候，很多文件路径是这样的../../../../img，一大堆上一级目录，怎么避免这个情况呢，在webpack.base.conf.js中设置：
alias就是设置别名的地方

  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'css': '@/modules/css',
      'js': '@/modules/js',
      'components': '@/components'
    }
  },

如果是vue-cli4创建的项目，就有创建vue.config.js文件

const path = require('path');        //引入path模块
function resolve(dir){
    return path.join(__dirname,dir)  //path.join(__dirname)设置绝对路径
}
module.exports={
    chainWebpack:(config)=>{
        config.resolve.alias
            //set第一个参数：设置的别名，第二个参数：设置的路径
            .set('@',resolve('src'))
            .set('assets',resolve('src/assets'))
            .set('components',resolve('src/components'))
            .set('views',resolve('src/views'))
    }
}

在html中使用记得加~