大家可能注意到了，我们的静态资源有两个目录src/assets和static/，它们有什么区别呢？资源打包要回答这个问题，我们需要了解webpack是如何处理静态资源的。所有*.vue文件中的所有模板和CSS都由vue-html-loader和css-loader查询资源URL解析。例如，在imgsrc="./logo.png"和background:url(./logo.png)中，./logo.png是相对资源路径，将被Webpack解析为模块依赖。因为./logo.png不是Javascript，所以当把它当作模块依赖时，我们需要使用url-loader和file-loader来处理。这个公式化的过程已经为你配置了加载器，所以你基本上得到了文件名指纹和条件内联base64之类的东西，所以你可以使用相对/模块路径而不用担心部署。由于这些资源可以在构建期间内联/复制/重命名，因此它们本质上是您的资源代码的一部分。这就是为什么它们被推荐用于扩展源资源以替换Webpack处理的内部/src资源。事实上，您甚至不必将它们放在/src/assets中：您可以根据模块/组件来组织和使用它们，您可以将每个组件放在它自己的文件夹中，连同它的静态文件就在在它的旁边。**资源确定规则相对URL，例如./assets/logo.png将被解释为模块依赖。它们将根据Webpack输出配置自动生成的URL进行替换，这些URL是无前缀的URL，例如.模块请求，如请求（'some-module/image.png'）。如果你想改变Webpack的模块解析配置你需要使用这个前缀。例如，如果您需要处理资源别名，则需要使用~assets/logo.png来确保遵守此别名。特权相对URL，例如/assets/logo.png根本不处理。path正确，你需要使用require('./relative/path/to/file.jpg')，它会被file-loader处理并返回处理后的URL。例如：computed:{background(){returnrequire('./bgs/'+this.id+'.jpg')}}请注意，上面的示例将包含上次构建中./bgs/中的每个图像。这是因为Webpack无法猜测它们中的哪一个会在运行时被使用，所以它会包含所有图像。“真正的”静态资源相比之下，静态/中的文件根本不会被Webpack处理，它们直接按原样复制到最终目标中with相同的文件名。您必须使用绝对路径来引用它们。这是由config.js添加到build.assetspublicpath和build.assetssubdirectoryOK。这是一个默认值的例子：//config/index.jsmodule.exports={//...build:{assetsPublicPath:'/',assetsSubDirectory:'static'}}static/中的任何文件都需要使用要引用的绝对路径/static/[filename]。如果将assetSubDirectory更改为资产，则需要将这些URL替换为/assets/[文件名]。翻译自：http://vuejs-templates.github...
