uni-app 项目中通过@绝对路径方式引入大于4kb的静态图片打包后会有重复图片

在 Uni-app 项目中，使用 @ 绝对路径引入大于 4KB 的静态图片时，可能会出现打包后图片重复的问题。这是因为 Uni-app 的构建工具在处理静态资源时，可能会根据文件内容生成不同的哈希值，导致相同的图片被重复打包。

以下是一些可能的解决方案：

1. 使用相对路径

尽量避免使用 @ 绝对路径，改为使用相对路径来引入图片。这可以减少构建工具在处理路径时可能出现的混淆。

<template>
  <img src="./assets/images/example.png" alt="Example">
</template>

2. 配置 vue.config.js

如果你使用的是 Vue CLI 3.x 或更高版本，你可以在 vue.config.js 中配置 chainWebpack 来自定义静态资源的处理方式。

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('images')
      .use('url-loader')
      .tap(options => {
        // 修改默认的 limit 值，使其大于 4KB
        options.limit = 10240; // 10KB
        return options;
      });
  }
};

3. 手动处理图片

如果你发现有重复的图片，可以手动将这些图片复制到 static 目录下，然后在代码中使用相对路径引用。

<template>
  <img src="/static/images/example.png" alt="Example">
</template>

4. 检查构建配置

确保你的构建配置中没有重复处理静态资源的规则。检查 webpack 配置，确保没有多个 file-loader 或 url-loader 规则同时处理图片。

5. 使用 require 引入图片

你可以使用 require 动态引入图片，这样可以确保图片被正确处理。

<template>
  <img :src="imageSrc" alt="Example">
</template>

<script>
export default {
  data() {
    return {
      imageSrc: require('@/assets/images/example.png')
    };
  }
};
</script>

6. 检查文件内容

确保引用的图片文件内容确实相同。如果文件内容不同，即使路径相同，构建工具也会生成不同的哈希值，从而导致重复打包。

7. 使用 image-webpack-loader

你可以使用 image-webpack-loader 来优化和压缩图片，减少重复的可能性。

npm install image-webpack-loader --save-dev

然后在 vue.config.js 中配置：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('images')
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({
        bypassOnDebug: true
      })
      .end();
  }
};