? ? ? 自從上次體驗(yàn)了一下vite的使用經(jīng)歷，卻是比webpack運(yùn)行快，所以就很喜歡這個(gè)工具。但是在使用過程中也需要一些細(xì)節(jié)問題，做個(gè)筆記記錄下來；
defineConfig函數(shù)助手
? ? ?首先我們?cè)陧?xiàng)目根目錄下面創(chuàng)建vite.config.ts （vite已經(jīng)支持ts版本文件）然后創(chuàng)建配置內(nèi)容，這里我使用defineConfig函數(shù)助手來
import { defineConfig } from 'vite'
export default defineConfig({
})
這個(gè)功能能聯(lián)想出來vite的功能清單，可以快速的選擇使用，看了一下defineConfig源碼，
入口：
export declare function defineConfig(config: UserConfigExport): UserConfigExport;
這里使用的配置內(nèi)容來自UserConfigExport
export declare type UserConfigExport = UserConfig | UserConfigFn;
UserConfigExport拋出了2種，要么是object類型的配置數(shù)據(jù)，活著是一個(gè)函數(shù)UserConfigFn，但是這個(gè)配置函數(shù)還是會(huì)拋出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;
.....
}
它是一個(gè)ts接口，最終?defineConfig 里面所聯(lián)想出來的配置屬性就是這些！
alias（別名）
1.0版本中使用方式：
alias: {
? ? ?'@':?resolve(__dirname, './src')
}
2.0版本使用方式：
resolve: {
? ? ? ?alias: {
? ? ? ? ? ? ?'@': resolve(__dirname, './src')
? ? ? ? }
}
一對(duì)比發(fā)現(xiàn)多嵌套了一層，看一下源碼就一目了然了
plugins(插件)
為了使vite變成一個(gè)純的打包工具，就連vue都需要配置一個(gè)插件, 使用方式：
安裝：
yarn add?@vitejs/plugin-vue -D
配置：
import vue from '@vitejs/plugin-vue'
plugins: [
? ? vue()
]
