Nuxtで環境設定ごとにファイル分ける

2019年2月10日

cross-envパッケージをインストール

npm install --save cross-env

envファイルの作成

env.dev.js、env.pro.jsのように開発用、本番用の環境設定ファイルを作ります。
下は開発用と本番用でBASE_URLを変えたいときの例です
// env.dev.js
module.exports = {
  BASE_URL: 'http://localhost:8000'
}

// env.pro.js
module.exports = {
  BASE_URL: 'http://example.com'
}

package.jsonの変更

cross-env NODE_ENV=”***”を追加します。
"scripts": {
    "dev": "cross-env NODE_ENV=\"dev\" nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "cross-env NODE_ENV=\"pro\" nuxt generate"

nuxt.config.jsの変更

環境設定ファイルをrequireで読んでenvに設定します。
今回はbuildの下に宣言します。
+ const environment = process.env.NODE_ENV;
+ const envSet = require(`./env.${environment}.js`)

module.exports = {

...

  build: {
    /*
     ** You can extend webpack config here
    */
    extend(config, ctx) {
      
    }
  },
+ env: envSet
}
設定はこれで終わりです。

ビルドのdevとgenerateでprocess.env.BASE_URLがevnファイルの環境設定に置き換わって出力されてくれます。