vue的别名设置，方便开发
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('layout', resolve('src/layout'))
}
使用方式
import HelloWord from "components/HelloWord.vue"
注意：在css或者html中使用别名，需要在别名前加“~”
-
css module 中：
@import "~@/style/global"
@import "assets/css/base.css";
-
css 属性中：
background: url("~@/assets/xxx.jpg")
-
html 标签中：
<img src="~@/assets/xxx.jpg" alt="xxx">
