如何使用Vite创建vue项目中配置别名和扩展名

本文主要是介绍如何使用Vite创建vue项目中配置别名和扩展名，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在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: 列出不需要预构建的依赖，通常用于那些需要动态加载或有特殊处理需求的库。