Vue - 如何在背景图像 url 中使用 @答案

【问题标题】：Vue - how to use @ in background-image urlVue - 如何在背景图像 url 中使用 @
【发布时间】：2021-12-18 08:20:05
【问题描述】：

在<style> 部分，我想使用@ 作为background-image 的路径，如下所示：

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

但是，出现错误：

This relative module was not found:

* ./@/assets/images/banner.png in ./node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/pages/home/index.vue?vue&type=style&index=0&id=5b685826&scoped=true&lang=scss&

我该如何解决？我使用vue-cli 生成应用程序。

vue.config.js

module.exports = {
  outputDir : 'public',
  runtimeCompiler: true,
  pluginOptions: {
    webpack: {
      dir: [
        './webpack'
      ]
    }
  }
}

【问题讨论】：

根据vue-loader docs，如果您的图像实际存在于src/assets/images/banner.png，您所拥有的应该没问题。是这样吗？
我会假设在组件内部，任何本地 <style> 声明都将被限定（甚至可能在构建器模块解析阶段），所以问题可能是在这种情况下，webpack alilas 解析将假定一个相对路径。您是否尝试使用显式相对路径？另外，您是否尝试在@ 前面加上/？
我试过background-image: url("../../assets/images/banner.png"); 有效

标签： javascript css vue.js webpack vuejs2

【解决方案1】：

在 '@' 之前添加'~'，比如吹

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

【讨论】：

不工作This dependency was not found

【解决方案2】：

我在 vue + webpack 设置中遇到了同样的问题。最后，我最终使用了 webpack 的 resolve-url-loader，这很棒（见这里https://www.npmjs.com/package/resolve-url-loader）

npm install resolve-url-loader --save-dev

要正确使用它，必须在 sass-loader 和 css-loader 之间加载！此外，在 resolve-url-loader 之前的加载器需要源映射。

为了实现这一点，我的 vue.config.js 看起来像：

....

module.exports = {
    ....

    chainWebpack: config => {

        ....

        config.module
            .rule('scss')
            .oneOf('vue')
            .use('resolve-url-loader')
            .loader('resolve-url-loader').options({
                keepQuery: true
            })
            .before('sass-loader');

    },

    css: {
        loaderOptions: {
            sass: {
                sourceMap: true,
                }
                
            }       
        }
    }

};

【讨论】：