vue cli3 configure folder alias alias

vue cli3 configure folder alias-alias

①Create vue.config.js

②Configure

module.exports={
    
    
	configureWebpack:{
    
    
		resolve:{
    
    
			alias:{
    
    
				'@' : 'src',
				'assets' : '@/assets'
				'别名': '路径'
			}
		}	
	}
}

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('', resolve(''))
  }
};

When used in dom:

<img src="~assets/img/xx.jpg" alt="图片1">