Vue 中的别名设置与使用（采坑）

一、设置

vue.config.js 文件，set 方法，第一个参数是自定义别名，第二个参数是原始路径

module.exports = {  
    // 资源路径简写
    chainWebpack(config) {
        config.resolve.alias
			.set('@', resolve('src'))
			.set('@stylus', resolve('src/assets/stylus'))
			.set('@components', resolve('src/components'))
			.set('@images', resolve('src/assets/images'))
			.set('@libs', resolve('public/libs'))
    }    
};

二、使用

1. import

Vue 文件中 script 标签中引入文件

import MapToolbar from "@components/TopHeader.vue"

Vue 文件中 style 标签中引入CSS 文件。注意 import 前面有 @ 别名前面有 ~

@import '~@stylus/base.styl';

2、require

// HTML <img> 标签使用
<img name="image" :src="require(`@images/header.png`)" alt="">

// js 代码中使用
imgObj.src = require(`@images/header.png`);

3、url()

注意 @ 前面有 ~

.icon-close {
    content: url('~@images/close.png')
}