如何使用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: [],
		},
	},
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

配置各部分的解释：

• alias：
  通过定义别名，可以在导入语句中使用简短的别名代替长路径，提高代码可读性和可维护性。

• extensions：
  指定在导入语句省略文件扩展名，Vite 会自动尝试添加并查找这些扩展名。这样可以避免在导入语句中显式写出扩展名。

• dedupe：
  用于解决依赖包重复的问题。如果一个库被多个依赖间接重复引入，Vite 会尝试将其合并为一个。

• optimizeDeps：
  include: 列出需要在服务启动时预构建的依赖，以提高应用启动速度。
  exclude: 列出不需要预构建的依赖，通常用于那些需要动态加载或有特殊处理需求的库。