vue cli3 删除未引入的本地图片

要删除未引入的本地图片，你可以使用如下步骤：

1. 在你的 Vue 项目根目录下，找到 `src/assets` 目录，并进入该目录。

2. 执行以下命令来查找未被引入的图片：

   find . -type f -name "*.*" -not -path "./fonts/*" -not -path "./icons/*" -not -path "./images/*" | xargs grep -L "import"

注意，上述命令中的 `./fonts/*`、`./icons/*`、`./images/*` 是 `src/assets` 目录下的三个子目录，你可以根据实际情况进行修改。

3. 执行上述命令后，会输出未被引入的图片的文件路径。你可以手动删除这些未被引入的图片，或者使用以下命令自动删除：

   find . -type f -name "*.*" -not -path "./fonts/*" -not -path "./icons/*" -not -path "./images/*" | xargs grep -L "import" | xargs rm

这条命令会删除所有未被引入的图片。

注意，在执行以上操作前，请务必备份你的代码。

相关问题

vue cli3检测项目未引入的本地图片，并删除

你可以使用 webpack 打包图片并通过 Vue CLI3 进行引入，以便在项目中使用。如果你想删除项目中未引用的本地图片，可以使用以下步骤：

1. 安装 webpack 依赖包：

npm install webpack webpack-cli --save-dev

2. 在 `vue.config.js` 中配置 webpack：

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

3. 使用 webpack 打包图片并引入到项目中：

<template>
  <div>
    <img src="./assets/logo.png" alt="logo">
  </div>
</template>

4. 使用 `npm run build` 命令构建项目，webpack 会将图片打包到 `dist` 目录中。

5. 如果你想删除项目中未引用的本地图片，可以使用 `find` 命令查找所有图片文件，再使用 `grep` 命令查找项目中使用的图片，最后使用 `rm` 命令删除未使用的图片：

find ./src/assets -type f \( -name "*.png" -o -name "*.jpg" -o -name "*.jpeg" -o -name "*.gif" \) | grep -v -f <(grep -r -o -h --include "*.vue" --include "*.js" --exclude-dir node_modules "assets/.*\.\(png\|jpg\|jpeg\|gif\)" . | cut -d '/' -f 3- | sort -u) | xargs rm

这个命令将会删除所有未被引用的本地图片。注意，删除操作是不可逆的，请确保备份你的项目数据。

vue3本地图片引入

在Vue3中，本地图片的引入方式有一些变化。在Vite中，使用import语法来引入本地图片是不可行的，因为Vite不支持require。官方文档提供了两种解决方案。

第一种解决方案是将资源引入为URL。你可以使用import语法来引入图片，并将其赋值给一个变量，然后在模板中使用这个变量作为图片的src属性。例如：

import chatHealth from '@/assets/chat-health.png'
<img :src="chatHealth" alt="" />

这种方法在本地运行时可以加载出图片，但是在真实环境（测试/线上）中，可能会出现找不到文件的问题。这是因为打包后的文件路径与实际路径不匹配。你可以检查打包后的文件，看看是否包含了这个图片。如果没有，可能是因为Vite没有正确加载这个图片。需要进一步检查你的操作是否正确。

第二种解决方案是使用相对路径来引入图片。你可以直接在模板中使用相对路径来引入图片，而不是使用import语法。例如：

<img src="../assets/images/chat-health.png" alt="">

这种方法在本地运行和真实环境中都可以正常加载图片。

总结起来，Vue3中本地图片的引入方式在Vite中有一些变化。你可以尝试使用import语法将图片引入为URL，或者直接在模板中使用相对路径来引入图片。具体选择哪种方式取决于你的需求和项目配置。
#### 引用[.reference_title]
- *1* [vue3 vite版本 引入本地静态图片的方式](https://blog.csdn.net/weixin_42211816/article/details/122731618)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [vue3：加载本地图片等静态资源](https://blog.csdn.net/weixin_43972437/article/details/129028118)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]