vue scss后缀文件background-image路径错误的解决

当使用Vue结合SCSS编写样式时，如果在样式中设置了background-image属性，并且设置的路径存在问题，那么会导致图片无法正常加载。下面是解决该问题的完整攻略：

问题分析

样式中设置background-image属性使用的是相对路径，而在Vue项目中，其相对路径往往是相对于main.js文件或者Vue组件所在位置的路径。如果图片的相对路径出现问题，那么就会导致其在打包后的页面中无法正常显示。

解决方案

解决这个问题的方法有两种。

1. 使用SCSS提供的函数

SCSS提供了用于处理路径问题的函数，可以通过该函数将相对路径转换成绝对路径。具体的函数是：

background: url(resolve-url('相对路径/图片名称.png'));

其中，resolve-url函数可以将相对路径转换成绝对路径。

2. 使用公共资源路径

Vue提供了一种公共资源路径（publicPath）的设置方法。通过在vue.config.js文件中进行配置，可以让所有的资源路径都基于publicPath来进行处理。具体的配置如下：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/production-sub-path/'
    : '/'
}

其中，'/'表示当前路径，也就是相对于根路径的路径。

示例说明

示例一

下面是一个示例，演示如何使用SCSS提供的函数解决背景图片路径问题。

在Vue组件的样式中设置如下代码：

background-image: url(resolve-url('../../assets/images/bg.png'));

这里的../../assets/images/bg.png表示背景图片的相对路径。

在打包后的页面中，背景图片就可以正常显示了。

示例二

下面是一个示例，演示如何使用公共资源路径来解决背景图片路径问题。

在vue.config.js文件中设置如下配置：

module.exports = {
  publicPath: '/'
}

在Vue组件的样式中设置如下代码：

background-image: url('/assets/images/bg.png');

这里的/assets/images/bg.png表示背景图片的相对路径，基于publicPath来计算出最终的绝对路径。

在打包后的页面中，背景图片也可以正常显示了。