前端項目集成Vite配置一覽無餘!

語言: CN / TW / HK

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 servevite,vite默認是開發環境(development),當執行了vite build命令,vite默認環境為生產環境(production)。注意地,當執行地是vite preview命令,vite默認環境也是生產環境,因為這個命令主要是創建一個能在本地執行的生產環境。JavaScript模塊有一個暴露特定上下文元數據屬性的對象(import.meta),這個對象包含了當前模塊的信息,對象裏有三個屬性:env(環境變量)resolveurl(當前模塊加載路徑),因為在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"'`; }

image.png 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值。 - image.png 而這裏是控制的是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:{},// 依賴優化配置 })

參考資料

# Vite官方中文文檔

# vite 基礎配置

# postcss官方文檔