【问题】vue.config.js配置文件路径引用

原创于 2022-02-16 11:07:55 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

web-vue 专栏收录该内容

50 篇文章

订阅专栏

本文详细介绍了如何在Vue应用中通过vue.config.js配置文件，设置组件目录（views）、资产（assets）和自定义别名（@），并展示了HTML中使用别名的示例。

在vue.config.js中配置

const path = require('path');//引入path模块
function resolve(dir){
    return path.join(__dirname,dir)//path.join(__dirname)设置绝对路径
}

module.exports={
    chainWebpack:(config)=>{
        config.resolve.alias
        //set第一个参数：设置的别名，第二个参数：设置的路径
        .set('@',resolve('./src'))
        .set('assets',resolve('./src/assets'))
        .set('views',resolve('./src/views'))
    }
}

注意，引用别名时如果是HTML中的路径，则需要在别名前面加符号 ~

<img src="~assets/img/tabbar/profile.svg">