一、基本作用
resolve配置项主要用于指定如何解析模块路径，包括设置别名、指定扩展名、避免重复加载依赖以及指定解析条件等。通过合理配置resolve选项，可以更灵活地管理和优化项目中的模块解析逻辑。
二、具体配置选项
1、alias：用于为模块路径创建别名，可以简化导入路径。例如，可以将'@'映射到/src目录，这样在项目中就可以使用简化的路径来导入模块。具体配置如下：
javascript">resolve: {alias: {'@': '/src', // 将 '@' 映射到 '/src' 目录'@components': '/src/components', // 将 '@components' 映射到 '/src/components' 目录'@utils': '/src/utils' // 将 '@utils' 映射到 '/src/utils' 目录}
}使用别名后，可以这样导入模块：
javascript">import Button from '@components/Button';
import { formatDate } from '@utils/date';2、extensions：允许指定在解析模块时自动添加的文件扩展名。默认情况下，Vite会解析.mjs、.js、.ts、.jsx、.tsx、.json等扩展名。但你也可以根据需要进行自定义，例如：
javascript">resolve: {extensions: ['.js', '.ts', '.vue'] // 自动解析这些扩展名
}这样，在导入模块时就可以省略扩展名：
javascript">import Example from '@/components/Example'; // 省略了 '.vue' 扩展名3、dedupe：用于避免重复加载某些依赖，通常用于处理依赖项之间的版本冲突。例如，如果你的项目中同时使用了不同版本的React，你可以通过dedupe选项来指定只加载一个版本的React
javascript">resolve: {dedupe: ['react', 'react-dom'] // 避免重复加载 react 和 react-dom
}Vite 在执行 resolve.dedupe 时会根据以下策略来决定去掉哪个版本：
-
基于传入的顺序：
resolve.dedupe中的依赖数组顺序可能会影响去重的行为。假设你在配置中列出react和react-dom，Vite 会尝试按照这个顺序去解析并去重依赖。也就是说，如果你指定了['react', 'react-dom']，那么如果其他依赖有多个版本，Vite 会优先使用配置中顺序靠前的版本。 -
优先使用第一个出现的版本：在去重时，Vite 会优先保留第一个出现的版本。如果没有明确的版本要求，它会保留最早出现的版本。
三、配置示例
以下是一个完整的vite.config.js配置示例，其中包含了resolve配置项：
javascript">import { defineConfig } from 'vite';
import { resolve } from 'path';export default defineConfig({resolve: {alias: {'@': resolve(__dirname, 'src'), // 将 '@' 映射到 'src' 目录'@components': resolve(__dirname, 'src/components'), // 将 '@components' 映射到 'src/components' 目录'@utils': resolve(__dirname, 'src/utils') // 将 '@utils' 映射到 'src/utils' 目录},extensions: ['.js', '.ts', '.json', '.vue'], // 自动解析这些扩展名dedupe: ['react', 'react-dom'], // 避免重复加载 react 和 react-dom// conditions 可以根据需要进行配置},// 其他配置项...
});
