vue-cli：我可以在<template>中使用@，但不能在<style>中使用

Question

在vue-cli中，因为它是在 webpack.base.conf.js 中定义的，所以我可以在＆lt; template＆gt; @ 代码>：

＆＃xA;＆＃xA;

 ＆lt; img src =“@ / assets / logo.png”＆gt;＆＃xA;  

＆ #xA;＆＃xA;

但在＆lt; style＆gt; 中不是这样的：

＆＃xA;＆＃xA;

  background：url（@ /assets/logo.png);

实际上我可以把它写成 url（../ assets / logo.png ）并且它有效，但它使 url 依赖于组件的路径：如果我移动组件（到子目录，我将不得不重写 url ，例如）。

＆＃xA;＆＃xA;

我该如何解决这个问题？

＆＃xA;

Answer 1

如果您使用

url(../assets/logo.png)

由于相对路径问题，可能无法进行部署。

最安全的方法是使用内联样式：

<template>
  <div v-bind:style= "{ 'background-image': 'url(' + box + ')' }">
    Placeholder
  </div>
</template>

<script>
  // @ is an alias to /src
  import box from '@/assets/box.jpg';

  export default {
    data() {
      return { box };
    }
  }
</script>

有关详细信息，请参阅this。