类星体资产与静态目录

Question

我试图了解资产目录和静态目录之间的区别，以及何时应该使用其中一个，尤其是在处理 images.From 目录结构 docs 时，它们似乎描述为

assets/ # 动态资源（由webpack处理）
statics/ # 纯静态资源（直接复制）

非常感谢更简单详细的解释。

Answer 1

docs 非常直接地解释了资产处理的差异：

Please note that whenever you bind “src” to a variable in your Vue scope, it must be one from the statics folder. The reason is simple: the URL is dynamic, so Webpack (which packs up assets at compile time) doesn’t know which file you’ll be referencing at runtime, so it won’t process the URL.

<template>
  <div>
    <q-img :src="thisImgDoesntWork" />
    <q-img :src="thisImgWorks" />
    <span class="thisCssImgFromAssetsWorks"></span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      thisImgDoesntWork: '~assets/dummy.png',
      thisImgWorks: '/statics/dummy.png'
    }
  }
}
</script>

<style lang="scss" scoped>
.thisCssImgFromAssetsWorks {
    // ... because the URL can't change after compile time
    background: url('~assets/dummy.png');
}
</style>

类星体资产与静态目录

Quasar assets vs statics directories

quasar

webpack-dev-server

quasar-framework