vite 簡介與 .env 環境變數

vite 簡介

Getting Startedvitejs

vite - Getting Started

Vite 是一個相對較新的前端構建工具。這一兩年幾乎統一了前端構建工具。主要工能有：

1. build tool

2. dev server

特色與優勢就懶得查了。總之就是方方面面評價很高。

本文只討論應用於Visual Studio 2022中React and ASP.NET Core專案的部份。

vite 組態 for React and ASP.NET Core

主要組態檔vite.config.ts。大體上用起始專案 React and ASP.NET Core 給的組態就行了。 此設定啟用了 proxy 組建開發伺服器(dev server) port:5173，好處是熱重載與後端無關會很順。 其中 api 預設只開通 '^/weatherforecast'將它改成'^/api/(\w+)' (RegEx 語法)這樣其他 web api 才會通。

vite 組態中，一般並不需要啟動 proxy。在React and ASP.NET Core專案包含了前端與後端，為 dev server 加入 prosy 組態讓前後端分離可以讓開發期間的熱重載絲滑不會被後端卡住。

此 proxy 只在開發期間有效，正式版本的 build 與 release 就會不見。

vite.config.ts

// [...略...]
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [plugin()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    proxy: {
      //'^/weatherforecast': { //------ 預設只開通 weatherforecast API。
      '^/api/(\\w+)': {        //------ 改成 api 開頭的API都能通過proxy。
        target: 'https://localhost:7144/',
        secure: false
      }
    },
    port: 5173,
    https: {
      key: fs.readFileSync(keyFilePath),
      cert: fs.readFileSync(certFilePath),
    }
  }
})

vite 環境參數

不知為何不同的前端 build tool 的環境參數設定與取用方式都一樣又都相似。官網說明如下：

Env Variables and Modesvitejs

vite 環境參數使用紀錄

相同的部份，環境參數檔名一樣是.env、.env.production 、.env.development 等等的。

不同的部份，Vite 環境變數名稱開頭必需是"VITE_"否則直接無視。讀取時名稱開頭以 import.meta.env開頭。

vite 預設幾個基本的環境參數，看名稱就知道指什麼了。

"BASE_URL": "/",
"MODE": "development",
"DEV": true,
"PROD": false,
"SSR": false

設定環境參數

.env

# Vite 環境變數名稱開頭必需是"VITE_"否則直接無視。
# 使用名稱： import.meta.env.VITE_{name}
# 例: import.meta.env.VITE_FOO
VITE_FOO = TEST-FOO1234567890
VITE_BAR = 測試環境參數中文也可以

.env.production

# Vite 環境變數名稱開頭必需是"VITE_"否則直接無視。
# 使用名稱： import.meta.env.VITE_{name}
# 例: import.meta.env.VITE_FOO
VITE_BAR = 正式環境參數中文也可以

檢視環境參數

在 vite 檢視全部環境參數可以 dump 全部。仍需以 import.meta.env 開頭才能取到環境參數。

<Box typography='h6'>前端環境參數</Box>
<Box component='pre' sx={{ whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' }}>
  {JSON.stringify(import.meta.env, null, ' ')}
</Box>

結果如下

使用環境參數範例

// 在開發模式時才 dump 錯誤訊息用來 debug 或單元測試。 
if (import.meta.env.DEV)
    console.debug('ValidationSummary', { errorsMsg })

完整程式碼

GitHub - relyky/N8ReactAppTpl: NET8 + React.v18GitHub

(EOF)