Vue在css中图片路径问题解决的配置方法
作者：他的猫MM
这篇文章主要为大家介绍了Vue在css中图片路径问题解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
css外设置background-image
在css外设置background-image时，不能直接使用url，应该使用
<li :style="'background-image:url(require('./../assets/banner_top2.png'))'"></li>在css中设置background-image时，使用相对路径在webpack打包后出现问题，图片路径到了static下
在build/util.js中配置publicPath：“../../”
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../'
})
webpack对css文件打包时会验证图片资源是否获取成功，若找不到资源文件，就会报错。同时注释的资源图片也会进行检查。
在webpack.base.conf.js中使用别名（resolve.alias）解决scss @import相对路径问题(webpack5以上版本会自动配置@为当前目录src)：
当遇到样式过多时或者公共样式，我们会将样式单独写在一个文件夹common.scss;
配置别名：@相当于目录src
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
}两种引入方式
在js中：
//原来是这样写 import './../src/scss/common.scss'; //定义别名后可以这样写 import '@/scss/common.scss';
在scss文件中：注意在这里需要加~在@符号前面
//原本这样写 @import './../scss/common.scss'; //现在这样写 @import '~@/scss/common.scss';
使用别名不仅简单方便，同时避免了相对路径使用时出现的问题，例如在a.scss文件中引入b.scss
//a.scss
@import '@/scss/module/b.scss';
//b.scss
div{
background-image: url('~@/assets/images/1.png');
}
这时再在另外的文件中引入a.scss，则b文件中的图片资源的相对路径就会改变，找不到资源图片报错。如果使用上面方法则会避免这些错误。
注意：如果你的引入的样式文件格式为scss则，在style标签上应设置：（css，less等同理，在js中引入没有这个顾虑）
<style lang="scss" scoped>
@import '~@/styles/register/main.scss';
</style>为了避免不必要的错误，最好在css中引入css样式，scss中引入scss样式，不要混淆。
以上就是Vue在css中图片路径问题解决的详细内容，更多关于Vue css图片路径的资料请关注脚本之家其它相关文章！