Vue之vue项目引入图片和设置路径别名
1、在vue项目中引入图片,图片放在static/img文件下,引用的时候这样写<div class="img"><img src='static/img/face-1.jpg'></div>//在static文件夹下的静态文件加入时不需要从引用出网上找,如不需要这样写//'..../static/img/face-1.jpg'//而只需要从...
·
1、在vue项目中引入图片,图片放在static/img文件下,引用的时候这样写
<div class="img">
<img src='static/img/face-1.jpg'>
</div>
//在static文件夹下的静态文件加入时不需要从引用出网上找,如不需要这样写
//'..../static/img/face-1.jpg'
//而只需要从static处开始写就行
2、设置路径别名
在vue项目中,有时会import一些组件,引入的文件要这样写
import searchFace from '../views/searchFace/searchFace'
这路径有时候两个点还好算一点,要是三个点四个点,着实让人头晕;
因此我们可以进行路径别名的设置,比如只要在src目录下的,我们用@来代替
//在webpack.base.config.js中
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
}
那么现在,只要在src下的文件都可以用@来开头
如果我这样设置:
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'views': resolve('src/views'),
}
},
则说明所有在src/views文件夹下的文件的路径都可以用view来开头。
更多推荐
已为社区贡献3条内容
所有评论(0)