Nuxt3でサーバー側とブラウザ側で違う値を設定したかった

APIサーバーのURLとかサーバーとブラウザ側で変えたいなーと思った

runtimeConfigを使うとサーバー側しか使えない設定があるのでいけるかなー

だた、コード内にその変数があるかないかを以下のように書く必要がありそうでうーん。

const config = useRuntimeConfig()

const url = config.apiURL || config.public.apiURL

できればどういう環境変数で管理されているかを見せたくない。

import.meta.envだとブラウザとサーバーで使い分ける方法がなさそうなので無理そう。
define機能も同様に無理そう。

ここまできてキーを出さないことを妥協することを考えだす。

runtimeConfigだとHTML上にまとまって記載されてしまうのでできれば違う方法を使いたい。

ブラウザ側だとprocessがなくてprocess is not definedとエラーがでる。
こんな感じでできないかなーと考える。

typeof process != 'undefined' ? process.env.XXX : import.meta.env.YYY

ちなみにimport.meta.envはビルド時に置換される。

ちなみに、build時にブラウザ側はprocess.env.XXXという記載は{}.XXXと置換されているようで。
process.env?.XXXとすると置換されないみたい。

ここにきて三項演算子使うなら判定これじゃなくてもっと直接的にこんな感じでいいよねってことで試してみる。

process.server ? process.env.XXX : import.meta.env.YYY

ビルド後のコードを見てみるとサーバー・ブラウザ側ともに計算後のものが記載されていて驚く。

'XXX'

process.env.XXX

これでいいや。

調べる中で環境変数・定数の設定の仕方３つくらいわかったのでどこかでまとめてもいいかもしれない。