nuxt.js(v2)のベースディレクトリをターミナルから変更する

nuxt.jsでgenerateした静的サイトを/yourDir/配下で配信したい場合は、nuxt.config.jsにてrouter.baseを設定する。

nuxt.config.js

module.exports = {
  router: {
    base: 'yourDir',
  },
  ...
}

ただ…テスト毎に配信ディレクトリを変えたいとき、毎回nuxt.config.jsファイルを修正するのは非常にめんどくさいミスの基。なので、$ npm run generateする時に、環境変数経由で変更できるように設定しておく。

また、cross-envを活用することで、winowsにも対応にしておく。環境変数の扱い方はmacとwinだと違うのだ。

NPMパッケージをインストール…はしなくてOK

nuxt.js(v2)では、はじめからcross-envがインストール済み。素晴らしい。

環境変数を宣言してrouter.baseを設定

nuxt.config.jsに環境変数を宣言しつつ、router.baseを設定する。

nuxt.config.js

const baseDir = process.env.BASE_DIR || '/'

module.exports = {
  router: {
    base: baseDir,
  },
  //...
}

動作確認

MAC

terminal

BASE_DIR=/yourDir/ npm run generate

WINDOWS対応版

terminal

npx cross-env BASE_DIR=/yourDir/ nuxt generate

生成されたdist内のデーターを/yourDir/ディレクトリにUPして確認。OK。

---

参考：https://nuxtjs.org/api/configuration-router

Link

以下、公開中のnuxt.js(v2)関連の記事一覧

技術よりの記事

1. nuxt.js(v2)のインストール〜ESLint設定まで
2. nuxt.js(v2)の作業ディレクトリを整理
3. nuxt.js(v2)のベースURLをターミナルからコントロール
4. nuxt.js(v2)でpug/stylusを利用する
5. nuxt.js(v2)でIE11対応をする（CSS編）
6. nuxt.js(v2)でIE11対応をする（JS編）
7. nuxt.js(v2)で絶対パス(https~)を取得する方法
8. nuxt.js(v2)でSEOに必要なmeta(OGP)を入れたい
9. nuxt.js(v2)でSEOに必要なmeta(OGP)で入力漏れの事故をなくす

よく使うプラグインのお話

1. nuxt.js(v2)で便利なvue-mqを使ってみるがSSRモードでコンソールエラーがでるので確認してみた。
2. nuxt-linkでスムーズスクロールするならvue-scrolltoが便利で気が利いている…と思う。
3. nuxt.jsでパララックスをするならvue-parallax-jsがお手軽。Cool!

まとめ系

1. nuxt.js(v2)でgenerate納品する前にやっておきたい設定
2. nuxt.jsにおける「components」ディレクトリの規約（案）