nuxt.js(v2)で絶対パス(https~)を取得する方法

nuxt.jsでOGPタグのURLを自動化するときに、レンダリングする前に絶対パスを取得する必要があった。調べても出てこなかったので取得方法をメモ。

取得方法は、ローカル・ステージング環境やデプロイ時にURLやディレクトリを変更したい方向け。

ということでさっそく…

１．nuxt.config.jsで下準備

ローカル・ステージング環境やデプロイ時にURLやディレクトリを変更したい。環境変数を使うと便利なので、nuxt.config.jsで下準備をしておく。

1. baseUrlとbaseDirを環境変数を使って変更できるように。
2. envにbaseUrlを登録。
3. router.baseにbaseDirを登録。

nuxt.config.js

const baseDir = process.env.BASE_DIR || '/'
const baseUrl = process.env.BASE_URL || 'http://localhost:3000'

module.exports = {
  env: {
    baseUrl: baseUrl,
  },
  router: {
    base: baseDir,
  },
}

２．テストコード

test.vue

<template lang='pug'>
div
  p {{absolutePath}}
</template>

<script>
export default {
  computed: {
    absolutePath () {
      return `${process.env.baseUrl}${this.$router.history.base}${this.$route.path}`
    },
  }
}
</script>

簡単に取得内容を説明すると…

process.env.baseUrl
↓
nuxt.config.jsでenvに登録した内容を取得。

$router.history.base
↓
nuxt.config.jsでrouter.baseに登録した内容を「末尾の/なし！」で取得。

$route.path or $route.fullpath
↓
routeパスを取得（fullpathにすると、ハッシュやクエリも一緒に取得）

3.実行

ターミナルで以下実行

MAC

BASE_URL=https://example.com BASE_DIR=/yourDir/ npm run dev

WIN

※windowsは環境変数の扱い方が違うのでcross-env経由で行う。nuxt.js(v2)系からは、cross-envがはじめから入っている。

npx cross-env BASE_URL=https://example.com BASE_DIR=/yourDir/ nuxt

4.結果

https://example.com/yourDir/test

OK。取得できた。
もっとスマートな方法があれば、だれか教えてくださいませ。m(__)m

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」ディレクトリの規約（案）