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

【问题标题】：vue-cli: I can use @ in <template> but not in <style>vue-cli：我可以在 <template> 中使用 @ 但不能在 <style> 中使用
【发布时间】：2018-07-18 16:38:13
【问题描述】：

在vue-cli中，因为是在webpack.base.conf.js中定义的，所以我可以在<template>中这样使用@：

<img src="@/assets/logo.png">

但<style>中不是这样的：

background: url(@/assets/logo.png);

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

我应该如何解决这个问题？

【问题讨论】：

其他人似乎也有同样的问题。你看过这个讨论吗？ github.com/webpack-contrib/file-loader/pull/135#150

标签： webpack vue.js vue-cli

【解决方案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 了解更多详情。

【讨论】：