使用vue3+vite导入图片路径错乱问题排查及解决

背景

使用vue3+vite开发的时候，导入svg图片时，同一个文件夹下的文件，其中一个路径正常解析，另一个不行。更改文件名之后，该图片文件就可以正常解析了。出现这个问题的时候感觉一脸懵逼，在使用webpack开发的时候并没有出现过这种现象，找了很久问题，终于解决了，特此记录一下。

项目配置：vue："^3.2.38"； vite："^3.0.9"

问题复现

左边为引入路径

右边为浏览器解析路径

可以看出：对于logo.svg图片的路径，vite解析为了/@fs/src/assets/img/logo.svg, 这显然是有问题的

于是我查看了一下vite.config.ts

vite.config.ts

部分相关代码如下：

import { fileURLToPath, URL } from 'node:url'

// defineConfig 中配置的路径别名
resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }

经过检查发现，配置的路径别名并没有什么问题，那是为什么呢？

问题排查

路径中的@fs

在Vite中，@fs 是一个内部使用的特殊前缀，它指示Vite从文件系统中直接提供资源。这个前缀通常在开发过程中由Vite自动添加到模块的路径中，以区分模块请求和普通的静态资源请求。

当在Vite项目中看到一个路径包含 @fs，这意味着：

• 文件系统访问：Vite正在告诉其内部服务器，该资源应该直接从文件系统中提供，而不是作为一个模块或者通过其他方式处理。

• 绝对路径：@fs 通常与文件的绝对路径一起使用，这样Vite就可以准确地定位到文件系统中的资源位置。

在正常情况下，开发者不需要直接使用或关心 `@fs` 前缀。它是Vite内部处理资源时的一个实现细节。如果你在开发过程中遇到了包含 `@fs` 的路径，这可能是由于Vite的某些内部逻辑或者配置导致的。通常，这不应该影响资源的加载，因为Vite知道如何处理这些路径。

vite的缓存问题

当排查了文件问题之后，那最有可能的就是开发服务器的缓存导致的问题

解决缓存：

1. 重启Vite开发服务器
2. 清除所有缓存（删除 `node_modules/.vite` 目录）

node_modules/.vite

node_modules/.vite 目录是Vite在开发模式下自动生成的一个缓存目录。Vite是一个构建工具，它使用这个缓存目录来存储预优化的依赖项和其他缓存数据，以加快开发服务器的启动速度和模块的热重载（HMR）速度。

在这个目录中，你可能会找到以下内容：

• 优化的依赖模块： Vite会预处理node_modules中的第三方依赖，将它们转换为ES模块格式，并存储在.vite目录中。这样，浏览器可以直接加载这些模块，而不需要额外的打包步骤。

• 源码映射（Source Maps）： 对于预处理的依赖，Vite还会生成源码映射，以便在开发者工具中提供更好的调试体验。

• HMR状态： 热模块替换（HMR）相关的状态信息也可能存储在这个目录中，以便在模块更新时快速应用更改。

• 其他缓存数据： Vite可能会缓存一些其他数据，比如插件生成的临时文件，以加快构建和开发过程。

Vite对这个目录的处理主要包括：

• 生成和更新缓存： 在开发模式下，当你第一次启动Vite服务器时，它会检查node_modules中的依赖，并生成优化后的版本存储在.vite目录。如果依赖项有更新，Vite会重新生成缓存。

• 读取缓存： 在后续的开发服务器启动中，Vite会读取这些缓存数据，以避免重新优化依赖项，从而加快启动速度。

• 清理缓存： 如果你的依赖项发生变化，或者你手动更新了Vite的版本，有时候你可能需要清理这个缓存目录，以确保Vite使用最新的依赖项和配置。你可以通过删除.vite目录或者使用Vite提供的命令（如vite --force）来强制Vite重新生成缓存。

总的来说，node_modules/.vite目录是Vite用来提高开发效率的一个实现细节，通常你不需要手动干预这个目录。如果遇到缓存相关的问题，通常只需要删除这个目录，然后重新启动Vite开发服务器即可。

解决

删除node_modules/.vite文件，重启本地服务器

题外话

webpack对于文件的缓存

Webpack的缓存机制： Webpack是一个模块打包工具，它通过一系列的加载器和插件来处理项目中的各种资源，如JavaScript、CSS、图片等。Webpack在构建过程中也会使用缓存来提高性能。例如，Webpack可以缓存模块的转换结果，以便在下次构建时如果模块没有变化，就可以直接使用缓存的结果，而不需要重新执行昂贵的构建步骤。

Webpack的缓存通常存储在内存中，但也可以配置为存储在文件系统中。在Webpack 5中，引入了持久化缓存，可以将缓存数据存储在文件系统中，这通常通过配置cache选项来实现。

为什么使用缓存： 无论是Vite还是Webpack，使用缓存的主要目的都是为了提高构建和重构建的速度。缓存可以减少不必要的计算，避免重复执行相同的任务，从而为开发者提供更快的反馈循环。

在Webpack中，缓存可以配置为存储在内存中或者文件系统中。默认情况下，Webpack的缓存是存储在内存中的，这意味着缓存只在Webpack的构建会话期间存在，当Webpack进程结束时，缓存也会消失。

从Webpack 5开始，引入了持久化缓存，允许将缓存数据存储在文件系统中，这样即使在重新启动Webpack构建后，缓存数据也可以被重用。当你配置Webpack使用文件系统缓存时，你可以指定缓存的存储位置。

以下是一个Webpack 5中配置文件系统缓存的例子：

// webpack.config.js
module.exports = {
  // ...
  cache: {
    type: 'filesystem', // 使用文件系统缓存
    cacheDirectory: path.resolve(__dirname, '.temp_cache'), // 指定缓存目录
    buildDependencies: {
      config: [__filename], // 当配置文件变更时，缓存失效
    },
  },
  // ...
};

在这个配置中，cacheDirectory 选项用于指定缓存存储的目录。如果你没有指定 cacheDirectory，Webpack将使用默认的缓存目录，通常是在 node_modules/.cache/webpack 目录下，这个目录位于你的项目目录中。

持久化缓存可以显著提高构建性能，特别是在大型项目中，因为它避免了在每次构建时重新处理模块。然而，需要注意的是，当项目的依赖或配置发生变化时，可能需要清除缓存以确保构建的正确性。

以上就是使用vue3+vite导入图片路径错乱问题排查及解决的详细内容，更多关于vue3+vite导入图片路径错乱的资料请关注脚本之家其它相关文章！