vue引入assets下图片路径找不到问题

一、概述

项目目录结构

./
├── assets
│   └── logo.png
└── components
    └── test.vue

test.vue中的css样式，需要引用assets下的logo.png文件。

#main {
    width: 200px;
    height: 200px;
    background: url('logo.png');
  }

运行后报错：

 ERROR  Failed to compile with 1 errors                                                                                                          15:43:10

This relative module was not found:

* ./logo.png in ./node_modules/css-loader?{"sourceMap":true}!...

二、解决办法

使用相对路径

#main {
    width: 200px;
    height: 200px;
    background: url('../assets/logo.png');
  }

注意：用多少个../ 取决于vue文件和assets目录之间，跨越了多少层级。

我这里只用了一个，如果你的层级比较深，需要添加多个../

完整代码如下：
test.vue

<template>
  <div id="main"></div>
</template>

<script>
  export default {
    name: "test"
  }
</script>

<style scoped>
  #main {
    width: 200px;
    height: 200px;
    background: url('../assets/logo.png');
  }
</style>

View Code

访问页面，效果如下：