自从上次体验了一下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()

]