前端項目集成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:{},// 依賴優化配置
})