参考ページ
インストール
yarn add cross-env
環境ごとの設定ファイルを作成する
config
フォルダを作成して、その中に各環境の設定ファイルを作成する
-config/env.development.js
ファイルを作成して下記のように記載する
module.exports = { apiBaseUrl: 'https://dev.example.com', }
-config/env.staging.js
ファイルを作成して下記のように記載する
module.exports = { apiBaseUrl: 'https://stg.example.com', }
-config/env.production.js
ファイルを作成して下記のように記載する
module.exports = { apiBaseUrl: 'https://prod.example.com', }
nuxt.config.jsファイルの設定
- サーバーの環境変数であるNODE_ENVの値によって参照する設定ファイルを変更する処理を入れる
const appEnvironment = require(`./config/env.${process.env.NODE_ENV || 'development'}.js`) export default { (省略) env: appEnvironment, (省略) }
package.jsonファイルの設定
- script内のサーバー起動時にNODE_ENVの値を設定して起動できる状態にする
"scripts": { "dev": "nuxt", "stg": "cross-env NODE_ENV=\"staging\" nuxt", "prod": "cross-env NODE_ENV=\"production\" nuxt", "build": "nuxt build", "build:stg": "cross-env NODE_ENV=\"staging\" nuxt build", "build:prod": "cross-env NODE_ENV=\"production\" nuxt build", "generate": "nuxt generate", "generate:stg": "cross-env NODE_ENV=\"staging\" nuxt genera te", "generate:prod": "cross-env NODE_ENV=\"production\" nuxt generate", "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .", "lint": "yarn lint:js" },
利用方法
page/index.vue
内で設定した環境変数を取得する方法は下記のように記述するだけで取得することができる
process.env.apiBaseUrl