一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第4天,点击查看活动详情。
<img src="../../../assets/logo.png">
虽然这么通过数着文件夹,也可以引入assets静态资源。但如果文件的层次结构一旦发生变化,或者该静态资源要在别的页面使用,就又得重新数一次文件夹,非常不靠谱。
那怎么办呢?
我们可以借助webpack路径别名,安全又高效的引入静态资源。
定义assets别名
vue.config.js
const resolveRealPath = (dir) => path.join(__dirname, dir);
module.exports = {
configureWebpack: {
resole: {
// 按照自己的项目结构,定义若干个路径别名
alias: {
'@': resolveRealPath('src'),
'@assets': resolveRealPath('src/assets'),
'@components': resolveRealPath('src/components'),
}
}
}
}
使用assets别名
header.vue
<template>
<div cl
="page-header">
<!-- 【注意】Vue模板中前缀~使用alias别名 -->
<img src="~@assets/img/logo.png"/>
<avatar></avatar>
</div>
</template>
<script>
// 【注意】js中,直接使用alias别名
import Avatar from '@component/avatar.vue'
import weatherIcon from '@assets/img/wather.png'
export default {
components: {
Avatar,
}
}
</script>
<style lang="scss" scoped>
.page-header{
// 【注意】CSS中前缀~使用alias别名
background-image: url('~@assets/header-bg.png')
}
</style>