Question

我正在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，要知道所需对象是文件并返回其公共URL vue cli使用开箱即用的file-loader和url-loader。

当处理来自静态目录的资产时，文件不会被webpack处理并按原样复制。您需要使用绝对路径来引用该文件。例如/static/cat.png

是否存在性能问题？

使用相对路径时，文件由url-loader处理。您可以在build / 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字节，浏览器不必单独向服务器查询图像数据，从而节省了往返，从而减少了对服务器的请求数量。

但是如果文件大小超过10000 kb，则url-loader会自动将作业移交给文件加载器。

file-loader允许您配置文件的复制位置以及如何命名。

我应该何时优先考虑一种方法或另一种方法

如果您不希望webpack处理您的资产，请使用 static 文件夹。但请记住使用绝对路径。

只需使用相对路径，然后麻烦webpack是否内联或使用文件加载器使用version hashes复制/重命名文件，这更适合缓存。

更多参考：

何时在Vue + webpack

1 个答案: