Webpack 何时在Vue+中使用静态或动态资产；网页包

我正在用Vue开发一个网页，我发现有两种方法可以寻址和保存图像或css文件。通过相对路径或静态文件夹

问题是，有什么区别？什么时候我应该优先选择一种方法还是另一种？是否存在性能问题

非常感谢

有什么区别

当您使用相对路径时，文件将由webpack解析和处理

例如，在

标记中，您使用相对路径对图像进行寻址，如下所示：

<template>
<div>
    <img src="./images/cat.png" alt="cat">
</div>
</template>

{
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
  }

在上面的示例中，正在处理的文件是一个扩展名为.png的图像文件。因此，webpack要知道所需的对象是as文件，并返回vue cli使用的公开URL，而且是现成的

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

/static/cat.png

是否存在性能问题

使用相对路径时，文件由

url加载程序处理。您可以在build/webpack.base.conf.js文件中找到它，如下所示：

<template>
<div>
    <img src="./images/cat.png" alt="cat">
</div>
</template>

{
    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加载器将自动将作业交给文件加载器

文件加载器允许您配置复制文件的位置和命名方式

什么时候我应该优先选择一种方法还是另一种

当您不希望webpack处理您的资产时，请使用静态文件夹。但请记住使用绝对路径

只需使用相对路径，将麻烦留给webpack来决定是内联还是使用文件加载器来复制/重命名文件，使用哪个更适合缓存

有关更多信息，请参阅：