vue项目配置路径别名

vue.config.js配置路径别名及具体使用方法

配置代码

module.exports = {
    configureWebpack: {
        resolve: {
            alias: {
                // '@': 'src' 内部已经配置了这个
                'assets': '@/assets',
                'components': '@/components',
                'network': '@/network',
                'views': '@/views',
            }
        }
    }
}

1. template中使用

<img src="~assets/images/banner01.jpg" alt="" />

2.css中使用

div {
	background-image: url(~assets/images/banner01.jpg);
}

3. script中使用

<img :src="imgURL" alt="" />
export default {
  data() {
    return {
      imgURL: require("assets/images/banner01.jpg"),
    };
  },
};