别再../../引assets了,使用路径别名吧

463 阅读1分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 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>