Sass Vue Cli网页包后台url路径问题

使用vue cli

出于某种原因，如果我在SCS中直接引用某些图像，并且没有将它们动态绑定到vue对象，则这些图像的相对路径会出现问题

假设我有一个名为box的带有div的vue模板。 框的背景url如下所示：

.盒子{ 背景：url（“../img/box.jpg”）

当我运行npm-run-dev时，它在本地运行得很好。 但当我运行build时，它不工作。404错误。 我也尝试过这样做：

.box{
background: url('~../img/box.jpg')

但那没用

这就是：

当我在webpack.config中更改此选项时：

output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },

致：

它将在我的webpack构建中创建区块图像，并使用哈希进行缓存。并且只针对那些未绑定到vue对象中的特定图像

然后我必须将这些图像拖到根目录下的dist文件夹中……而不是我想做的事情，那就是将它们保存在相对于html文件的img文件夹中（html文件只是）：

---

我通过以下步骤成功复制了您的问题：

假设以下目录：

root/
  dist/
  src/
    assets/
      |--box.jpg
    components/
      |--home.vue

和home.vue：

<template>
  <div class="foo">

  </div>
</template>

<script>
  export default {
  }
</script> 

<style>
  .foo {
    background: url('../assets/box.jpg')
  }
</style>

但是，如果我返回根文件夹并尝试执行相同操作：

lite-server dist/index.html

我会遇到和你一样的问题

我通常是先导入图像，然后将其与内联样式一起使用：

<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>

占位符
//@是/src的别名
从“@/assets/box.jpg”导入box；
导出默认值{
数据（）{
返回{box}；
}
}

还可以查看以下讨论：

---

取决于根集的位置，您可以尝试

background:url（'~/assets/img/box.jpg'）

或

background:url（'~/src/assets/img/box.jpg'）

，

---

其中一个应该可以工作

尝试url前缀'~@/'

background-image: url('~@/assets/box.jpg');

lite-server index.html

lite-server dist/index.html

<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>

background-image: url('~@/assets/box.jpg');