Vue在css中图片路径问题解决的配置方法

更新时间：2023年06月26日 09:17:54 作者：他的猫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图片路径的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

vue3组件库Shake抖动组件搭建过程详解
这篇文章主要为大家介绍了vue3组件库Shake抖动组件搭建过程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
vue中页面跳转拦截器的实现方法
这篇文章主要给大家介绍了关于vue中页面跳转拦截器的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧。
2017-08-08
Vue开发之watch监听数组、对象、变量操作分析
这篇文章主要介绍了Vue开发之watch监听数组、对象、变量操作,结合实例形式分析了vue.js使用Watch针对数组、对象、变量监听相关操作技巧,需要的朋友可以参考下
2019-04-04
vue.js 添加 fastclick的支持方法
今天小编就为大家分享一篇vue.js 添加 fastclick的支持方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
element使用自定义icon图标的两种解决方式
因为安装原型图设计实现页面,在element自带的图标库好像没有,所以按钮的图标icon需要自定义,下面这篇文章主要给大家介绍了关于element使用自定义icon图标的两种解决方式,需要的朋友可以参考下
2022-07-07
vue如何移动到指定位置(scrollIntoView)亲测避坑
这篇文章主要介绍了vue如何移动到指定位置(scrollIntoView)亲测避坑，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
npm ERR! code E404在vscode安装插件时报错的两种解决方案
这篇文章主要给大家介绍了关于npm ERR! code E404在vscode安装插件时报错的两种解决方案,关于这个问题,通常是由于插件名称输入错误、网络问题或插件已被删除引起的,文中将两种解决方法都介绍的非常详细,需要的朋友可以参考下
2023-04-04
VUEX-action可以修改state吗
这篇文章主要介绍了VUEX-action可以修改state吗，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-11-11
vue项目中监听手机物理返回键的实现
这篇文章主要介绍了vue项目中监听手机物理返回键的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-01-01
实现一个简单的vue无限加载指令方法
vue 中的自定义指令是对底层 dom 进行操作，下面以实现滚动到底部加载数据，实现无限加载来介绍如何自定义一个简单的指令。
2017-01-01