[Nuxt.js] cross-envを使い環境に応じてbaseURLを分ける

cross-envを導入

yarn add cross-env

環境変数を作成

env ディレクトリを作成し、環境変数として使う値を作成する。今回はBASE_URLのみとする。

env/local.ts

module.exports = {
  BASE_URL: '/'
}

Github Pagesならリポジトリ名を入れる

env/production.ts

module.exports = {
  BASE_URL: '/somethings/'
}

package.jsonのscriptsを編集

devやbuildコマンドにcross-envを仕込む

package.json

{
  "scripts": {
    "dev": "cross-env NODE_ENV=\"local\" nuxt-ts --port=3003",
    "build": "cross-env NODE_ENV=\"production\" nuxt-ts build"
  }
}

nuxt.configで参照する

nuxt.config.ts

const environment = process.env.NODE_ENV || 'local'
const env = require(`./env/${environment}.ts`)

// 気になればログ吐いてデバッグ
console.log(env)

module.exports = {
  router: {
    base: env.BASE_URL
  }
  env: env
}

参考

Nuxtでcross-envを使い環境ごとに環境変数を分ける - Qiita