解析后台网址失败（...）

Question

我试图找出为什么我无法成功构建我的VUE项目，但当我采用以下scss样式时，构建失败：

github中的一个小问题示例

<style lang="scss" scoped>
.graf-demo {
            grid-area: 2 / 1 / 3 / 2;
            background: url('/assets/grafDemo.png') no-repeat;
        }
</style>

我收到以下错误消息：

模块生成失败（从../node_modules/css loader/dist/cjs.js）：错误：无法解析“/assets/analyticsDemo”。png“in'/dev/p6 tdcomm/View/js/components/analytics/”at/home/dev/node_modules/enhanced resolve/lib/Resolver。js:209:21 at/home/dev/node_modules/enhanced resolve/lib/Resolver。js:285:5在eval（eval在create（/home/dev/node_modules/tapable/lib/HookCodeFactory.js:33:10），：15:1）在/home/dev/node_modules/enhanced resolve/lib/unsafeccheplugin。js:44:7 at/home/dev/node_modules/enhanced resolve/lib/Resolver。js:285:5

项目结构：

dev:
   View:
       assets:
           analyticsDemo.png
       js:
         components:
                analytics:
                    page.vue
         app.js

网页：

        rules: [
            {
                test: /\.vue$/,
                use: 'vue-loader',
                include: [resolve('js')]
            },
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        plugins: ['@babel/plugin-syntax-dynamic-import']
                    }
                },
                exclude: /(node_modules|View\/js\/utils\/jssip\.js)/
            },
            {
                test: /\.(css|scss)$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                    {
                        loader: 'sass-loader',
                        // Requires sass-loader@^7.0.0
                        options: {
                            implementation: require('sass'),
                            sassOptions: {
                                fiber: require('fibers')
                            }
                        }
                    }
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: ['file-loader']
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: ['file-loader']
            }
        ]
    }```

Answer 1

尝试将背景：替换为背景图像：。

<style lang="scss" scoped>
.graf-demo {
            grid-area: 2 / 1 / 3 / 2;
            background-image: url('/assets/grafDemo.png') no-repeat;
        }
</style>

Answer 2

尝试替换背景：url（'/资产/grafDemo.png'）no-重复；

带有背景：url（'~@/资产/grafDemo.png'）；

Answer 3

我猜在这种情况下，使用相对路径更有意义：

<style lang="scss" scoped>
  .graf-demo {
     /* the relative url based on given path */
     background: url('../../../assets/grafDemo.png') no-repeat;
  }
</style>

看起来这个问题来自您的示例，这与您无法解决/资产/logo.png的问题不同。关于与资产的相对路径应该是：

<style lang="scss">
  div {
    background: url("./assets/logo.png");
  }
</style>