当サイトを作るときは、@nuxt/dotenvをインストールして環境変数を管理する方法にしていました。
改めて調べてみるとv2.13 以降からはNuxt標準の機能で環境変数の設定できる事がわかったのでそれをまとめていきます。
読者の想定と前提
- プロジェクトを作成している
- nuxtについての知識が少しでもある
.envの作成
こちらは今まで通り.envファイルを作成します。
BASE_URL=http://localhost:8000
API_URL=http://localhost:8888
API_KEY=xxxx-xxxx-xxxx
nuxt.config.jsに記述
export default {
// 公開されていいもの
publicRuntimeConfig: {
apiURL: process.env.API_URL || 'http://localhost:8888',
},
// 公開したくないもの
privateRuntimeConfig: {
apiKEY: process.env.API_KEY,
},
}
基本的には以上になります。
また、定義した変数は以下で呼び出す事ができます。
- pages
- store
- components
- plugins