在VueJS组件中引用静态资产

Question

我有一个VueJS项目（基于＃34; webpack-simple＆＃34;由vue-cli提供的模板），具有以下文件夹结构

我正在开发＆＃34; clickableimage.vue＆＃34;组件，我无法引用像图像这样的资产。该组件的代码如下所示。

<template>
<div id="clickableimagecomponent">

<img :src="imageURL" ></img>
<p>Hello There....</p>

</div>
</template>

<script>
 export default {
  name: 'app',
  data () {
   return {
    imageURL:"./dist/loading.gif",
    msg: 'Welcome to Your Vue.js App'
  }
 },

}
</script>

我已经设置了webpack来构建＆＃34; clickableimage.js＆＃34;将文件放入＆＃34; dist＆＃34;文件夹中。

我面临的问题是，在组件中，当我使用src（没有任何vue绑定）的img标签为＆＃34; ./ assets / loading.gif＆＃34;它有效。

但是，如果没有＆＃34; loading.gif＆＃34;上面的代码也有效。文件在dist文件夹中。调试FF中的JS显示如下。

显然，文件是从dist / loading.gif加载的，但文件夹中不存在此类文件。

我在这里遗漏了什么吗？我无法跟踪浏览器如何加载文件。是VueJS在幕后做任何魔术吗？

P.S：为了确定，我已经在FF的隐身窗口中打开了URL，以防浏览器显示缓存版本，但它也可以在那里工作。

我的webpack配置如下..

Answer 1

我只是在这里集思广益...我认为这与热模块重新加载并不完美有关。如果你将它作为"./assets/loading.gif"然后匹配test: /\.(png|jpg|gif|svg)$/，那就应该产生一个base64编码的图像，它嵌入在它捆绑的脚本中（而不是放在dist文件夹中）。现在也许当你把它改成"./dist/loading.gif"时发生的事情是，它仍然在脚本中搜索loading.gif，因为你最初使用{{1}运行了dev服务器，所以在dev环境中可能仍然可用}。我不是专家，但我认为你的webpack配置中的img-loader正在使用你的"./assets/loading.gif"并在最初构建的一个webpack块中智能地找到图像。如果您使用"./dist/loading.gif"启动开发服务器，我的猜测是它不会像您最初预期的那样工作。