在vite.config.js
中,resolve
用于配置模块解析规则,如设置别名、扩展名等。
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path';
export default defineConfig({
resolve: {
// 别名配置
alias: {
// 将 '@' 指向根目录下的 'src' 目录
'@': path.resolve(__dirname, 'src'),
},
// 自动解析的扩展名
extensions: ['.js', '.vue'],
// 是否严格遵循 `node_modules` 中的 `package.json` 中的 `main` 字段
dedupe: [],
// 是否尝试将绝对路径的导入转换为相对路径(仅适用于 CommonJS 模块)
optimizeDeps: {
// 预构建依赖列表,提高启动速度
include: ['vue', 'vue-router'],
// 排除预构建的依赖
exclude: [],
},
},
})
配置各部分的解释:
-
alias
:
通过定义别名,可以在导入语句中使用简短的别名代替长路径,提高代码可读性和可维护性。 -
extensions
:
指定在导入语句省略文件扩展名,Vite 会自动尝试添加并查找这些扩展名。这样可以避免在导入语句中显式写出扩展名。 -
dedupe
:
用于解决依赖包重复的问题。如果一个库被多个依赖间接重复引入,Vite 会尝试将其合并为一个。 -
optimizeDeps
:
include: 列出需要在服务启动时预构建的依赖,以提高应用启动速度。
exclude: 列出不需要预构建的依赖,通常用于那些需要动态加载或有特殊处理需求的库。