More than 1 year has passed since last update.

Nuxtで環境変数を分ける

Last updated at 2023-05-31Posted at 2023-05-31

開発時とビルト時で環境変数を分けたかった。

まず、runtimeConfigで変数を使えるようにする。

nuxt.config.ts

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      apiTest: 'hogehoge',
    },
  },
...

これで任意の場所で変数が使えるようになる。

const runtimeConfig = useRuntimeConfig();
console.log(runtimeConfig.public.apiTest);

次に、.env.devと.env.productionの２つのファイルを作って、
変数の中身をそれぞれ書き込む。

この時に、頭にNUXT_をつけて、
nuxt.config.tsのruntimeConfigの変数と名前を合わせると、
runtimeConfigが.envで上書きされる。

.env.dev

NUXT_PUBLIC_API_TEST = "https://test-dev.com/api/"

.env.production

NUXT_PUBLIC_API_TEST = "https://test-production.com/api/"

コマンド実行時に.envファイルを使い分ける。

package.json

"scripts": {
    "dev": "nuxt dev --dotenv .env.dev",
    "generate": "npx nuxi generate --dotenv .env.production",
...

参考

やっぱり上記のやり方よりこっちの方がいいかも