我开发在Vue公司的网页，我看到有处理和保存图像或CSS文件的方法有两种。 无论是通过相对路径或从静态文件夹。
现在的问题是，有什么区别？ 我什么时候应该优先考虑的一种方法或其他？ 是否存在性能问题？
非常感谢，
Answer 1:
有什么区别？
当您使用相对路径 ，文件被解析并通过的WebPack处理。
例如，在<template>标签使用相对路径如下处理的图像：
<template>
<div>
<img src="./images/cat.png" alt="cat">
</div>
</template>
将被转换成一个模块依赖为：
createElement('img', {
attrs: {
src: require('../images/cat.png') // this is now a module depency
}
})
在上述例子中所处理的文件是具有扩展名png格式的图像文件。 因此，对于的WebPack知道所需的对象是文件，并返回其公共网址VUE CLI使用文件装载器和网址加载器开箱。
卜从静态目录处理资产时，文件不被处理的WebPack和复制的。 您需要使用绝对路径来引用该文件。 例如/static/cat.png
是否存在性能问题？
当您使用相对路径的文件被处理的url-loader 。 您可以在建/ webpack.base.conf.js文件如下发现：
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
}
的limit上述选项通知URL加载器的文件内联作为一个底座64字符串。 例如，如果您有
//main.js
const cat = require(../images/cat.png); // cat.png is less than 10000 bytes
它将被转换和内联到main.js文件，而不是图像文件复制到dist文件夹为：
//main.js
const cat = url("data:image/png;base64,iVBFfaGVVGfF...);
如果它是一个简单的文件，并小于10000个字节的浏览器没有单独查询服务器的图像数据，节省了往返从而减少对服务器的请求的数量。
但是，如果文件大小为greter超过10000 KB网址加载器将自动交给文件装载作业。
文件加载器允许您配置哪里要复制的文件，以及如何将它命名。
当我应该优先考虑的一种方法或其他
当您不想要的WebPack来处理你的资产，使用静态文件夹。 但请记住，使用绝对路径。
只要使用相对路径和离开麻烦来的WebPack是否内联或使用文件加载程序复制/使用该文件重命名版本哈希值是用于缓存更好。
欲了解更多参考，以：
- 操作静电资产
- Vue的装载机资产URL Handlung
文章来源: When to use static or dynamic assests in Vue + webpack
