vue Nuxt 環境毎に環境変数の設定

Home › Memo › Nuxt 環境毎に環境変数の設定

本稿について

本稿はサイト運営者が学んだことなどを記したメモの内容です。
全てが正確な情報とは限りません。ご注意ください。また修正するべき点は適時修正していきます

各環境毎に設定できる様にする

cross-envをインストール

npm install --save cross-env

以下のファイルのように各環境毎に設定が記載されたファイルを作成する。

env.development.js

module.exports = {
  apiKey: "XXXXXXXXXXXXXXXXXXXXXXXXXXX"
}

package.jsonの scripts にcross-envも含めて実行する様に修正

package.json

"scripts": {
    "dev": "cross-env NODE_ENV=development nuxt",
  },

nuxt.config.jsにenvを設定するように修正を入れる

nuxt.config.js

const envSettings = require(`./env.${ process.env.NODE_ENV }.js`)

export default {
  env: envSettings,

Nuxtのソース上以下の様にして呼び出すことができる

process.env.apiKey

[参考]

関連ページ