vue3项目如何检测到没有引用的图片，并且删除

在 Vue3 项目中检测没有被引用的图片，可以借助 webpack 打包工具提供的插件来实现，例如 `image-webpack-loader` 和 `webpack-plugin-unused-images`。

首先，安装依赖：

npm install --save-dev image-webpack-loader webpack-plugin-unused-images

然后，在 `webpack.config.js` 中配置 `image-webpack-loader` 插件：

const path = require('path');
const { UnusedImagesWebpackPlugin } = require('webpack-plugin-unused-images');

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]'
            }
          },
          {
            loader: 'image-webpack-loader',
            options: {
              disable: true // 关闭插件，默认情况下开启
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new UnusedImagesWebpackPlugin({
      globOptions: {
        cwd: path.resolve(__dirname, 'src'),
        ignore: ['node_modules/**/*']
      }
    })
  ]
};

其中，`image-webpack-loader` 插件被配置在图片加载器的后面，用于检测图片是否被引用。`UnusedImagesWebpackPlugin` 插件用于检测项目中未被使用的图片，它会分析项目中的 HTML、CSS、JS 等文件，找出未被使用的图片，并在打包完成后输出报告。

最后，在 `package.json` 中添加一个脚本，用于启动检测：

{
  "scripts": {
    "check-unused-images": "webpack --config webpack.config.js"
  }
}

运行 `npm run check-unused-images` 即可开始检测未被使用的图片。如果有未被使用的图片，插件会在控制台输出报告，你可以根据报告中的信息手动删除这些图片。