vite serve --mode=production などとしてmodesを変えられると書いてあるが、production, development 以外だとどうなるかいまいちわからない。

`import.meta.env.PROD`, `import.meta.env.DEV` の値はどうなるのか

シンプルに isProduction を反映するだけらしい。そしてつねに DEV === !PROD

isProduction の値はここで決まる。

VITE_USER_NODE_ENV の出どころ。

mode の値を決めているところ。
後ろの処理の意味がよくわからんけど、いま大事ではないので深追いはやめておく。

Reactなどはdevelopmentビルドかproductionビルドかで挙動を変える。そこへの影響はどうか。

そういう挙動の切り替えは NODE_ENV を使うのが慣習なので、ここで調整されている。

優先順に。

.env

NODE_ENV=from_dotenv

vite.config.ts

export default {
  mode: "from_config",
}

NODE_ENV=from_env vite serve --mode=from_cli

結果

process.env.NODE_ENV === "from_env"
import.meta.env.MODE === "from_cli"
import.meta.env.DEV === true
import.meta.env.PROD === false

.env.staging

NODE_ENV=production

vite serve --mode=staging

結果

process.env.NODE_ENV === "production"
import.meta.env.MODE === "staging"
import.meta.env.DEV === false
import.meta.env.PROD === true

vite serve --mode=staging

結果

process.env.NODE_ENV === "staging"
import.meta.env.MODE === "staging"
import.meta.env.DEV === true
import.meta.env.PROD === false