自从上次体验了一下vite的使用经历，却是比webpack运行快，所以就很喜欢这个工具。但是在使用过程中也需要一些细节问题，做个笔记记录下来；
defineConfig函数助手
首先我们在项目根目录下面创建vite.config.ts （vite已经支持ts版本文件）然后创建配置内容，这里我使用defineConfig函数助手来
import { defineConfig } from 'vite'
export default defineConfig({
})
这个功能能联想出来vite的功能清单，可以快速的选择使用，看了一下defineConfig源码，
入口：
export declare function defineConfig(config: UserConfigExport): UserConfigExport;
这里使用的配置内容来自UserConfigExport
export declare type UserConfigExport = UserConfig | UserConfigFn;
UserConfigExport抛出了2种，要么是object类型的配置数据，活着是一个函数UserConfigFn，但是这个配置函数还是会抛出UserConfig，看一下UserConfigFn代码：
export declare type UserConfigFn = (env: ConfigEnv) => UserConfig;
从上面逻辑都牵扯到UserConfig这里，看看UserConfig到底封装了什么？
export declare interface UserConfig {
root?: string;
base?: string;
publicDir?: string;
mode?: string;
define?: Record<string, any>;
plugins?: (Plugin | Plugin[])[];
resolve?: ResolveOptions & {
alias?: AliasOptions;
}
css?: CSSOptions;
json?: JsonOptions;
esbuild?: ESBuildOptions | false;
alias?: AliasOptions;
.....
}
它是一个ts接口，最终 defineConfig 里面所联想出来的配置属性就是这些！
alias（别名）
1.0版本中使用方式：
alias: {
'@': resolve(__dirname, './src')
}
2.0版本使用方式：
resolve: {
alias: {
'@': resolve(__dirname, './src')
}
}
一对比发现多嵌套了一层，看一下源码就一目了然了
plugins(插件)
为了使vite变成一个纯的打包工具，就连vue都需要配置一个插件, 使用方式：
安装：
yarn add @vitejs/plugin-vue -D
配置：
import vue from '@vitejs/plugin-vue'
plugins: [
vue()
]
