vite+vue项目开始前推荐的一些配置

有很大比例的前端工作者在开始编写vue项目时，总是记着编写代码，觉的项目的vite配置是可以在遇到问题时再配置的，实则不然，项目写多了之后，就会发现，在编写vue之前，最重要的一步就是提前配置vite.config.js文件，一个好的项目配置，对后期编码有着事半功倍的效果。本文就来推荐一些可以提升我们编码效率的一些配置。

一、resolve.alias 路径别名配置

vite文档提到："当使用文件系统路径的别名时，请始终使用绝对路径。相对路径的别名值会原封不动地被使用，因此无法被正常解析。"，但是每一次都要手动去找绝对路径的话，是一件非常麻烦的事情，因此，我们可以为我们项目中的src目录配置别名为@，以在后期使用中，快读的定位到文件。

resolve: {
	alias: {
	    '@':path.resolve(__dirname,'./src'),
		// '@': fileURLToPath(new URL('./src', import.meta.url)),
		'@utils':path.resolve(__dirname,'./src/utils'),
	}
}

配置完路径别名后，在import等需要写路径的地方，都会有自动路径提示。

需注意，上述配置，需引入path，或者从node中引入：fileURLToPath, URL

如：

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

二、resolve.extensions 自动添加文件名后缀

添加了该配置，我们在引入文件时，如果遇到index.js/index.json等文件，就可以直接省略文件名。

如：

// 配置前：
import router from "@/router/index.js";
// 配置后：
import router from "@/router";

配置方式如下：

resolve: {
    extensions:['.js','.vue','.json'], // 自动添加文件名后缀      
}

注意，我这里添加了 .vue 的文件后缀，但官方文档有特别强调：不推荐添加vue的扩展后缀名。

三、AutoImport 自动引入配置

需安装扩展插件：unplugin-auto-import

安装命令：npm install  unplugin-auto-import -D

安装完成后，在vite的配置文件vite.config.js中引入，import AutoImport from 'unplugin-auto-import/vite' 

添加如下配置：

plugins: [
	AutoImport({
		imports: ['vue'],
	}),
]

添加完该配置后，我们在编码的过程中，就可以省去导入ref、reactive、toRefs等相关函数，这些都是特别常用的vue函数，因此可在一定程度上简化我们的代码。