前端項目集成Vite配置一覽無餘！
theme: hydrogen highlight: an-old-hope
Vite配置文件
- 默認指定：
vite.config.js。 - 自定義指定：
vite --config 自定義名稱.js。
Vite相關命令
- 查看Vite有哪些命令：
npx vite -help。
js
--host [host]// 指定域名
--port <port>// 指定端口
--https // 使用 TLS+HTTP/2
--cors // 可以跨域
--open [path] // 啟動自動打開服務器
--stictPort // 如果指定端口被使用退出程序
--force // 強制Vite重新執行預構建，忽視緩存
--config | -c <file> // 指定vite的配置文件
--base path // 指定url讀取文件基本路徑
--clearScreen // 日誌記錄時，是否清屏
--logLevel | -l <level> // 指定日誌等級：error|info|silent|warn
--debug | -d <feat> // 獲取調試日誌
--filter | -f <filter> // 過濾調試日誌
--mode | -m <mode> // 設置env模式
--help | -h // 獲取vite幫助信息
--version | -v // 獲取vite版本信息
什麼時候需要使用--force？
Vite緩存分為兩部分：
文件系統緩存：Vite會將預構建的依賴緩存到node_modules/.vite，package.json的dependencies字段和依賴lock文件，或者vite.config中相關字段配置過的，這些文件發生變化，vite就會重新構建，強制執行可以通過
--force或手動刪除.vite目錄。瀏覽器緩存：解析後的依賴請求會以http頭max-age=
max-age=31536000,immutable強緩存，提高開發頁面重載性能。 - vite命令有哪些：
js
vite [root] // 啟動以配置文件root為入口的項目開發環境
vite serve // 啟動以配置文件root為入口的項目開發環境
vite build [root] // 打包以配置文件root為入口的文件為生產環境文件
vite optimize [root] // 預構建生產環境
vite preview [root] // 構建一個本地預覽靜態生產環境
preview是沒有熱更新的，當程序修改不會實時更新頁面，需要重新執行命令。因為這個環境是生產環境，類似於上線項目，需要重新構建才能獲取修改的功能。
- pageage.json文件裏配置vite命令：
--noEmit的作用是隻進行檢查，不進行編譯輸出，這個屬性也可以在tsconfig.json文件中指定；--open項目啟動自動打開瀏覽器。
json "dev": "vite --open", "serve": "vite serve", "build": "vue-tsc --noEmit&& vite build", "staging": "vue-tsc && vite build --mode development", "preview": "vue-tsc && vite preview",
配置環境模式
默認環境：當pageage.json中的script字段裏的命令執行了vite serve或 vite，vite默認是開發環境（development），當執行了vite build命令，vite默認環境為生產環境（production）。注意地，當執行地是vite preview命令，vite默認環境也是生產環境，因為這個命令主要是創建一個能在本地執行的生產環境。JavaScript模塊有一個暴露特定上下文元數據屬性的對象（import.meta），這個對象包含了當前模塊的信息，對象裏有三個屬性：env（環境變量）、resolve、url（當前模塊加載路徑），因為在main.ts打印的信息，所以這裏獲取的路徑是src/main.ts。
在庫模式下，也就是打包為一個庫供其他開發人員下載引用的情況下，所有
import.meta.env.*的用法在構建時會被靜態替換，也就是使用的時候必須按import.meta.env.BASE_URL的原樣出現（例如import.meta.env['BASE_URL']是無效的）。但process.env.*不會被替換，庫的使用者可以動態修改它。如果不希望這樣做，可以在配置中配置：
js
define:{
` 'process.env.NODE_ENV': '"production"'`;
}
js
// main.ts
console.log(import.meta);
其中的env環境變量默認也有5個屬性：BASE_URL（url公共路徑）、DEV（是開發模式）、PROD（是否生產模式）、mode（環境模式）、SSR（是否服務器渲染）。當項目還配置有自定義環境變量時，env環境中自定義變量也會帶上的。
注意：如果自定義環境變量前綴必須為VITE_因為vite配置文件中的envPrefix屬性值默認為VITE_。如果想改變成自定義，在配置文件中必須配置envPrefix。
自定義環境：通過創建相應模式的文件。文件名格式如下：
js
.env // 所有模式都會加載
.env.local // 所有模式都會加載，但會被git忽略
.env.[mode].local // 只有特定模式會加載，但會被git忽略
.env.[mode] // 只有指定模式會加載，注意.env.production優先級比.env高
配置指定環境模式：通過在vite.config.js文件中的基本配置中的mode屬性指定，在這裏指定會覆蓋掉vite serve 、vite build中的默認mode模式，注意地，這個vite preview中mode不會被覆蓋，還有如果在命令中指定mode，比如vite serve --mode production，這樣也不會被配置文件中地mode覆蓋，也就是命令行指定mode優先級最高。
兼容設置
模塊導入兼容：支持原生ESM script標籤、原生ESM 動態導入。
js
// vite.config.js
build:{
target:'es2015',// 支持es6文件
}
瀏覽器兼容：兼容低版本瀏覽器，需要安裝：yarn add @vitejs/plugin-legacy -D
vite.config.js中的plugins配置：
```js
// vite.config.js
import legacyPlugin form '@vitejs/plugin-legacy'
plugins: [ legacyPlugin({ targets:['chrome 52'], // 需要兼容的目標瀏覽器列表，可以設置多個 additionalLegacyPolyfills:['regenerator-runtime/runtime'] // 面向IE11時需要此插件 }) ] ```
項目適配處理
對樣式的處理
預處理器的處理：由於Vite內置了對預處理器的支持，使用預處理器只需要安裝對應的預處理器就可以，再也不需要安裝相應預處理器加載器了，也不需要在vite配置了。比如使用less預處理器，這裏只需要下載less就行。
css Modules：在不同模塊中定義相同類名，會導致樣式被覆蓋，這時候就要用到CSS module。以.module.css結尾的文件都會被認為是一個css modules文件。導入這樣文件會返回一個相應對象。這樣就不會產生樣式衝突被覆蓋，因為每一個module都是一個獨立css文件，也就是模塊化。
css
/* example1.module.css */
.exampleClass{
color:green;
}
/* example2.module.css */
.exampleClass{
color:blue;
}
js
// main.ts
import example1 from '@/common/styles/example1.module.css'
import example2 from '@/common/styles/example2.module.css'
console.log(example1.exampleClass); // _exampleClass_16yyc_1
console.log(example2.exampleClass); // _exampleClass_tc6yz_1
Vite中css modules配置有5個屬性：
- localsConvention：模塊化後的css類名命名規則，駝峯還是劃線
- scopeBehaviour：配置當前模塊行為是模塊化還是全局化（標籤上帶有hash就是開啟了模塊化）有點類似是否style標籤是否配置了scoped，如下圖中去掉scoped就是全局化了，去掉scoped標籤上就沒有data-v-hash值。
-
而這裏是控制的是css modules文件的模塊行為。如果這個屬性配置了global，這個模塊文件樣式全局生效，上面的打印都是為undefined。
js
// main.ts
import example1 from '@/common/styles/example1.module.css'
import example2 from '@/common/styles/example2.module.css'
console.log(example1.exampleClass); // undefined
console.log(example2.exampleClass); // undefined
- generateScopedName:如[name][local][hash:5]，模塊對象生成的類名的規則，默認值是不帶name。
- hashPrefix：hash是根據文件名類名等生成的，這個前綴可以使生成的hash更加複雜獨特。
- globalModulePaths：想要參加到css模塊化的文件路徑數組。
postcss處理：使用postcss插件對css代碼進行轉換。postscss是什麼？一個用JavaScript工具和插件轉換css代碼地工具。使用postcss相關插件可以支持css使用高級語法、樣式瀏覽器兼容（添加兼容前綴），比如在css中使用變量var，Vite裏postcss配置默認支持css變量，如果需要支持添加兼容，需要安裝postcss-preset-env插件，並在postcss配置引入插件，代碼解析時就會自動添加兼容前綴
```css :root{ --color:green; }
.example{
color:var(--color,blue);/ 找不到--color這個變量就是使用後面的值/
user-select: none;
}
/
安裝了postcss-preset-env ，會自動加上前綴
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
/
Vite中配置css：js
css: {
modules: {
localsConvention:'camelCaseOnly',
scopeBehaviour:'local',
generateScopedName:'[name][local][hash:5]',
hashPrefix:'',
globalModulePaths:[]
},
postcss: {
plugins:[postcssPreset()],
},
preprocessorOptions: {
less: {
additionalData: '@import "./src/common/styles/index.less";',
},
},
devSourcemap: true,// 開發過程中是否啟用css sourcemap
},
```
對typescript處理
- 安裝依賴：
js
yarn add typescript -D // 安裝typescript
yarn add vite-plugin-checker -D // ts代碼檢查插件
- vite配置：
js
plugins: [checker({
typescript:true
})],
- tsconfig.json配置：在 tsconfig.json 中的 compilerOptions 下設置 "isolatedModules": true。如此做，TS 會警告你不要使用隔離（isolated）轉譯的功能。因為esbuild 只執行沒有類型信息的轉譯，它並不支持某些特性，如 const enum 和隱式類型導入。
對靜態資源處理
- vite對靜態資源的處理大大提供了引入格式的支持，通過對引入路徑添加參數後綴，資源引入為url（
?url）、顯示url引入、導入腳本為worker（?worker或?sharedworker）、將資源引入為字符串（?raw）。
js
import Worker from './worker?worker' // 引入為一個worker
import imgUrl from './assets/316149.jpg' //引入為一個資源路徑 ，imgUrl的值為/src/assets/316149.jpg
import assetAsURL from './assets/asset.js?url' //引入資源為url， assetAsURL的值為/src/assets/asset.js
import assetAsstring from './assets/asset.js?raw' //引入資源為字符串，這裏assetAsstring的值為js文件所有內容的字符串
對JSON文件導入處理
Vite中提供了對JSON文件解析的支持，當我們引入json文件的時候，Vite會幫我們轉化一下JSON格式為對象格式。
js
// {"a":"1"}
import jsonFile from './assets/example.json'
console.log(jsonFile);// {a:"1"}
對Vue、React處理
如果在Vue或React項目中使用Vite我們需要引入相應插件適配對應框架：如
```js // Vue3：@vitejs/plugin-vue // Vue3 JSX：@vitejs/plugin-jsx // Vue2.7：@vitejs/vite-plugin-vue2 // Vue<2.7：underfin/vite-plugin-vue2
// React：@vitejs/plugin-react ```
常見基本配置
defineConfig的配置參數格式：對象、promise回調函數、配置方法。當defineConfig為配置方法時，它的參數為一個包含三個屬性的對象：command（執行命令，有serve|build）、mode（環境模式）、ssrBuild（是否為服務器渲染構建）。在Vite配置中如果有些配置需要通過command或mode來控制時，這個配置方法就使用的上了。
js
// __dirname需要安裝@types/node
// 也可以使用process.cwd() 代表程序執行目錄，也就是項目根目錄
const resolve = (dir: string) => path.resolve(__dirname, dir);
export default defineConfig(({ command, mode }) => {
return {
// Vite配置
root: './',// 入口文件位置，如index.html
base: './',// 啟動服務公共路徑
publicDir: resolve('public'),// 靜態資源路徑
mode: 'production', // 指定mode，會覆蓋掉serve和build默認的mode
cacheDir: 'node_modules/.vite',// 默認vite緩存路徑
logLevel: 'warn',// 控制枱輸出的級別，error|info|silent|warn 默認 info 那麼所有的日誌都會打印出來
esbuild：{
jsxFactory: 'h',
jsxFragment: 'Fragment' 以上為自定義JSX
// ESbuild會被應用在 ts、jsx、tsx 文件，以下選項對要處理的文件類型進行配置
include：string | RegExp | (string | RegExp)[]
exclude：string | RegExp | (string | RegExp)[]
jsxInject:`import React from 'react'`// 自動為每一個被 ESbuild 轉換的文件注入內容
}
clearScreen: true,// 控制枱是否清屏，最好不要設置，設置會屏蔽掉一些關鍵終端信息
envDir: '',// 加載存放.env文件的目錄
envPrefix: 'VITE_',// 默認VITE_， 設置環境變量的前綴
appType: 'spa',// 應用種類 spa | mpa | custom
assetsInclude: [''],// 支持的其他類型文件都可以在這裏找到
plugins: [vue(),checker({typescript:true})],
css:{},
resolve: {
alias: {
"@": resolve('src'),// 簡化引用路徑，用@代替
},
dedupe: [],// 強制Vite始終將列出的依賴項解析為同一副本（從項目根目錄）
conditions: [],// 解析pageage.json中情景導出時的其他允許條件，如exports字段中的import和require為情景
mainFields: [],// 解析包的入口點時嘗試的字段列表
extensions: [],// 導入時想要省略的擴展名列表
preserveSymlinks: false,//
},
},
json: {
namedExports: true,// 是否支持從.json文件中進行按名導入
stringify: false,// 導入的json轉換為export default JSON.parse("...")
},
// 服務器相關
server:{
....
//服務器代理
proxy: {
'/api': {
target: 'http://127.0.0.1:2022',
// changeOrigin: true,// 代理時，host默認瀏覽器的host，為true，host為target的值
// rewrite:path=>path.replace(/^\/adc/,'') // 重寫url路徑
}
}
...
},
build: {
manifest: false,// 是否生成一個 manifest.json 的文件在assets目錄下
target: 'modules',
outDir: mode === 'staging' ? 'bundle' : 'dist',
modulePreload: true,// 是否動態引入polyfill，需要引入兼容性相關的文件
assetsDir: 'assets',// 指定打包生成靜態資源的存放路徑
assetsInlineLimit: 4096,// 默認4kb 配置圖片編譯base64時大小，大於以原文件引入，小於會直接編譯
chunkSizeWarningLimit: 500,// 打包文件超大小警告顯示，默認500kbs
emptyOutDir: true,// 構建時是否清空OutDir，再把新構建的文件放進去
watch: [''], // 監聽文件變化，如果啟動build不會退出程序,
sourcemap:false,// 構建後是否生成 source map 文件
....
},
ssr:{},// 服務器渲染配置
preview:{},// 預覽生產環境配置
worker:{},// worker線程相關配置
optimizeDeps:{},// 依賴優化配置
})