Vue项目中如何在background-image的url里使用@路径别名？

报错原因 #

<style>标签内的路径默认由css-loader处理，css-loader默认不会识别webpack预设的@别名（@默认指向src目录是vue-cli给webpack配置的别名），会将@识别为普通相对路径字符，拼接当前文件路径后找不到对应资源，触发报错。

解决方法 #

方案1：直接修改路径写法（无需改配置，立即生效） #

在@前增加~前缀，~是webpack规定的模块路径标识，会自动触发别名解析：

background-image: url("~@/assets/images/banner.png");

方案2：修改vue.config.js配置（一劳永逸，不用每次加~） #

在现有配置基础上新增css-loader的别名配置，修改后的完整配置如下：

const path = require('path')
module.exports = {
  outputDir : 'public',
  runtimeCompiler: true,
  pluginOptions: {
    webpack: {
      dir: [
        './webpack'
      ]
    }
  },
  // 新增以下配置
  chainWebpack: config => {
    // 如果你用的是less就把下面的scss改为less，用原生css改为css
    config.module
      .rule('scss')
      .use('css-loader')
      .tap(options => {
        options.alias = {
          '@': path.resolve(__dirname, 'src')
        }
        return options
      })
  }
}

配置修改完成后重启本地开发服务即可生效。

内容的提问来源于stack exchange，提问作者CCCC