Nuxt.js は実稼働環境と開発環境の構成を区別し、process.env.xxx を通じて直接アクセスします。
- クロス環境をダウンロード
npm install --save-dev cross-env
- ルートディレクトリの下に新しいフォルダー env.js を作成します
module.exports = {
development: {
NODE_ENV: 'development',
VUE_APP_BASE_API: '/dev',
},
production: {
NODE_ENV: 'production',
VUE_APP_BASE_API: '/pro',
},
}
- nuxt.config.jsに次のコードを追加します。
import env from './env'
export default {
... ...
env:{
NODE_ENV: env[process.env.NODE_ENV].NODE_ENV,
VUE_APP_BASE_API: env[process.env.NODE_ENV].VUE_APP_BASE_API,
},
... ...
}
- package.json の起動構成を次のように変更します。
{
"scripts": {
"dev": "cross-env NODE_ENV=development nuxt",
"build": "cross-env NODE_ENV=production nuxt build",
... ...
},
}
- プロジェクトで使用される
console.log(process.env.VUE_APP_BASE_API)
console.log(process.env.VUE_APP_BASE_API)