[Note] Vite 組態配置(持續更新)


Posted by urlun0404 on 2023-04-07

之前實習和現在工作專案都用Vite作為專案的開發工具,註篇記錄常用配置和遇到的問題,因為習慣用React,所以以下前端框架或套件的部分也都用React角度來寫。


Create Project

之前看過Web Dev Simplified不推薦用React CRA指令的影片,也就是 create react app,而Vite的cli指令是另一個替代React CRA的好選擇,例如要建立一個Vite + React + TypeScript的專案,根據Vite官方文件的指令如下:

pnpm create vite my-react-app --template react-ts




vite.config.js / vite.config.ts

雖然個人覺得Vite在組態配置上沒有webpack複雜,但有時候配合專案需要還是要搞清楚一些基本的組態功用,以下會列出有用過以及常用組態。

首先,如果自行定義Vite如何打包專案,要先建立Vite的組態檔案,檔名為vite.config.js(或是有在用TypeScript的話就是vite.config.ts),並且將組態檔案放在根目錄。

根目錄可能隨著專案設定改變,但預設通常是放在專案資料夾第一層:

Vite組態檔案的預設輸出就是組態配置的物件,若還沒有寫入組態配置:

export defult defineConfig({
    // config...
});

然後這裡簡單提供一些比較常用或是可能會用到的config和其預設值,範例如下:

import path from 'path';

export defult defineConfig({
    root: process.cwd(),  // __dirname
    publicDir: 'public', // path.resolve(root, 'public')
    envDir: root,
    envPrefix: 'VITE_',
    resolve:{
        alias:{
            // ...
        }
    },
    server:{
        proxy:{
            // ...
        }
    },
    base: '/',
    build:{
        outDir: 'dist',
        emptyOutDir: true,
        rollupOptions:{
            input:{
                // ...
            }
        }
    },
    plugin: [/* ... */]
});
  • root:指的是整個專案目錄的根路徑,預設就跟 __dirname 一樣,也就是專案資料夾第一層(Vite官方文件)。
    • 有時候會為了作些設定改變專案目錄的根路徑,譬如要做一個多頁式應用(MPA)的專案,這時建議 /public 資料夾的目錄路徑 ─ publicDir 和環境變數(environment variable)的讀取目錄路徑 ─ envDir 要清楚定義,因為像 envDir 的預設是 root,如果根路徑改變,不是環境變數檔案要放到新的根路徑,就是得定義清楚放置環境變數檔案的目錄路徑。
  • publicDir:放置 /public 資料夾的目錄路徑(Vite官方文件
  • envDir:放置環境變數檔案(.env[.any])的目錄路徑,環境變數定義可參考Vite官方文件
  • envPrefix:環境變數名稱前綴。
    • Vite本身已經處理好環境變數的定義,這裡只是為了強調Vite因為要區隔內建重要的環境變數,Vite預設規定自定義的環境變數是用 VITE_ 開頭
  • resolve.alias:目錄別名(Vite官方文件)。
    • 有時候為了避免在專案內寫出像是 import * as Components from ../components; 這種看到最後會讓人混淆的目錄路徑,可以在resolve.alias 內定義常用目錄的別名路徑
    • 範例:
        resolve:{
            alias:{
                assets: path.resolve(__dirname, 'src/assets'),
                components: path.resolve(__dirname, 'src/components'),
                // ...
            }
        }
      
  • server.proxy:local server的proxy配置,寫法可參考Vite官方文件
  • base:靜態檔案的輸出路徑(Vite官方文件
    • 這在部署時是個很重要的配置,主要是用來覆寫專案內的相對路徑,像是img src="./a.png" 或是HTML檔案內的 <script type="module" src="./main.jsx"></script>,詳情可參考Static Assets HandlingPublic Base Path
  • build:用來配置專案輸出(部署用)的一些組態(Vite官方文件)。
    • outDir:輸出後放置檔案的目錄
    • emptyOutDir:是否每次輸出都要清空放置檔案的目錄
    • rollupOptions:配置rollup打包專案的組態選項(Vite官方文件
      • Vite背後其實是透過rollup在打包專案輸出,所以才會出現這個東東🤣
      • 例如要配置多頁式應用就可以在這個組態內作設定
  • plugins:配置插件(Vite官方文件


References
Vite


#note #Vite #config #持續更新







Related Posts

網頁前後端簡易架構筆記

網頁前後端簡易架構筆記

初試啼聲,只用原生 JS 跟 CSS 寫「口罩地圖 」Ep.00

初試啼聲,只用原生 JS 跟 CSS 寫「口罩地圖 」Ep.00

APIFlask 初始化專案 - Part2

APIFlask 初始化專案 - Part2


Comments