在開(kāi)發(fā)項(xiàng)目的時(shí)候绿店，很多文件路徑是這樣的../../../../img，一大堆上一級(jí)目錄粟关，怎么避免這個(gè)情況呢言询，在webpack.base.conf.js中設(shè)置：
alias就是設(shè)置別名的地方
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'css': '@/modules/css',
'js': '@/modules/js',
'components': '@/components'
}
},
如果是vue-cli4創(chuàng)建的項(xiàng)目，就有創(chuàng)建vue.config.js文件
const path = require('path'); //引入path模塊
function resolve(dir){
return path.join(__dirname,dir) //path.join(__dirname)設(shè)置絕對(duì)路徑
}
module.exports={
chainWebpack:(config)=>{
config.resolve.alias
//set第一個(gè)參數(shù)：設(shè)置的別名凉袱，第二個(gè)參數(shù)：設(shè)置的路徑
.set('@',resolve('src'))
.set('assets',resolve('src/assets'))
.set('components',resolve('src/components'))
.set('views',resolve('src/views'))
}
}
在html中使用記得加~
<img src="~assets/img/a.jpg">
